Instant Search in pure Javascript (almost instantly)

June 17, 2009

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();
      };
    });
  });
});