Live search on category pages

Today we’ll have a look on how to have a simple live search on your category pages. For a demo, visit the film page on indiemondo.com. Here we have ‘Quick search’ input field, which will hide all films that doesn’t contain your search term.

Theres two steps: 1. insert the input field and 2. write a bit of jQuery.

The HTML is simple this.

[code]

<input type=”text” id=”filter-films” value=”” placeholder=”Quick search” />

[/code]

and the jQuery:

[code]

/* Quick search for arvhice pages */
$('#filter-films').keyup(function() {
    var f = $(this).val();
    var regex = new RegExp(f, 'gi');

    $('ELEMENT TO BE FILTERED ').fadeOut('fast')
        .each(function() {
            if($(this).html().match(regex)) {
                $(this).stop().show();
         }
     });	
});

[/code]

And this is all their is to making a live search box on your page.