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 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.


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


and the jQuery:


/* 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)) {


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

Leave a Reply

Your email address will not be published. Required fields are marked *