Here’s a really simple method for creating an instant search for a list of items. It lets you quickly filter a long list or table down to the few items you’re looking for.

First here’s a demo.

What’s nice is this only takes a few lines of code (and the magic of jQuery.)

$().ready(function(){
  // Instant Search
  $('#q').keyup(function(){
    $('.search_item').each(function(){
      var re = new RegExp($('#q').val(), 'i')
      if($(this).children('.search_text')[0].innerHTML.match(re)){
        $(this).show();
      }else{
        $(this).hide();
      };
    });
  });
});

As long as your markup contains a list of items with search_item classes, and these contain an element with a search_text class, you’re set. For example:

 <form action="javascript:void(0);">
    <input type="text" id="q" name="q"/>
 </form>
<div class="search_item">
  <h4 class="search_text">Item 1</h4>
  <p>Some more info about Item 1</p>
</div>
<div class="search_item">
  <h4 class="search_text">Item 2</h4>
  <p>Some more info about Item 2</p>
</div>
<div class="search_item">
  <h4 class="search_text">Item 3</h4>
  <p>Some more info about Item 3</p>
</div>

It takes regular expression syntax as well so queries like Item\s+(1)|(2) will work just fine. It wouldn’t be hard to enhance this to split keywords in the query apart, so Bachelor Mount would match an item call Mount Bachelor. If this appeals to you feel free to fork the gist on github.