Warning: Illegal string offset 'lang' in /var/www/bakadesign.dk/public_html/backoffice/wp-content/plugins/wp-highlightjs/wp_highlight.js.php on line 119

Warning: Illegal string offset 'lang' in /var/www/bakadesign.dk/public_html/backoffice/wp-content/plugins/wp-highlightjs/wp_highlight.js.php on line 119

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.

<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)) {
                $(this).stop().show();
         }
     });	
});

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 *