JSFiddle - React, Tailwind, and code Playground

by arvind07

HTML

<div id="people">
  <div>
    <p>Joe Blogs</p>
    <img src=".." />
  </div>
  <div>
    <p>Jane Doe</p>
    <img src=".." />
  </div>
</div>
<input type="text" id="filter">
<div id="result"></div>

JavaScript

var results = [];
$("#people p").each(function(){
   results.push($(this).text());
});

jQuery('#filter').live('keyup', function(event){
        var term = jQuery(this).val();
        var htm = '';
        jQuery('#result').empty().hide();

        //Keys with codes 40 and below are special (enter, arrow keys, escape, etc.), Key code 8 is backspace.
        if(event.keyCode > 40 || event.keyCode <91  || event.keyCode == 8 ||
          event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 ||
          event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 ||
          event.keyCode == 40) {
            for(x in results){
                var match = results[x];
                if(match.toLowerCase().indexOf(term.toLowerCase()) != -1){
                    var o = '<b><u>'+term+'</u></b>';
                    var a = match.replace(term, o);
                    htm += '<li>'+a+'</li>';
                }
            }
            var output = '<ol>' + htm + '</ol>';
            if (htm.length > 0) {
                jQuery('#result').show().append(output);
            }
        }
        if(term.length == 0){
            jQuery('#result').empty().hide();
        }
    });