jQuery live Filter

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>
Code language: HTML, XML (xml)

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); }); });
Code language: JavaScript (javascript)

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.

*
*