jQuery live Filter

jQuery live Filter

This awesome snippet allows you to live filter / search using  jQuery  only. No plugin required. It needs: An input text. Formated informati... 01:31

This awesome snippet allows you to live filter / search using jQuery only. No plugin required.

It needs:

1. An input text.
2. Formated information using html tags such as: TR, LI and similar.

Feel free to customize the fadeOut() effect or add your own modifications to fit your needs.

HTML

<form id="live-search" action="" class="styled" method="post">
 <fieldset>
  <input type="text" class="text-input" id="filter" value="" />
  <span id="filter-count"></span>
 </fieldset>
</form>

jQuery snippet

$(document).ready(function(){
    $("#filter").keyup(function(){
 
        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;
 
        // Loop through the comment list
        $("#my_table tr").each(function(){
 
            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0 && $(this).attr('class') != "header") {
                $(this).fadeOut();
 
            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
 
        // Update the count
        var numberItems = count;
        $("#filter-count").text(" Claves = "+count);

    });
});