Skip to main content

Simple real time search and filter using jQuery

Let's say you have a list of HTML elements (div) and you want to implement the search and filter functionality. Here is dead simple example:

Assuming your HTML block looks like the following:

<input type="text" id="search" placeholder="Type to search">
<button id="search-btn">Search</button>

<div class="list-partner">
<div class="partner-item">...</div>
        <div class="partner-item">...</div>
        <div class="partner-item">...</div>

And this javascript snippet will add the magic:

var rows = jQuery('.list-partner .partner-item');
jQuery('#search-btn').click(function() {
var val = jQuery.trim(jQuery('#search').val()).replace(/ +/g, ' ').toLowerCase();

var itemtxt = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase();
if(itemtxt.indexOf(val) > -1) {
} else {

Pretty amazing huh? \m/