jQuery live search

by Sebastian Kay

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>

<nav>
    <ul>
                    <li><a href="/Folder_with_intelligence" title="Folder with intelligence">Folder with intelligence</a></li>
            <li><a href="/Classic_matches" title="Classic matches">Classic matches</a></li>
            <li><a href="/Dogtag" title="Dogtag">Dogtag</a></li>
            <li><a href="/Paracord" title="Paracord">Paracord</a></li>
            <li><a href="/Corrugated_hose" title="Corrugated hose">Corrugated hose</a></li>
            <li><a href="/Crickent_lighter" title="Crickent lighter">Crickent lighter</a></li>
            <li><a href="/A_pack_of_nails" title="A pack of nails">A pack of nails</a></li>
            <li><a href="/A_pack_of_screws" title="A pack of screws">A pack of screws</a></li>
            <li><a href="/Screw_nut" title="Screw nut">Screw nut</a></li>
            <li><a href="/Bolts" title="Bolts">Bolts</a></li>
            <li><a href="/Piece_of_plexiglas" title="Piece of plexiglas">Piece of plexiglas</a></li>
            <li><a href="/Zibbo_lighter" title="Zibbo lighter">Zibbo lighter</a></li>
            <li><a href="/Apollon_Soyuz_cigarettes" title="Apollon Soyuz cigarettes">Apollon Soyuz cigarettes</a></li>
            <li><a href="/Malboro_Cigarettes" title="Malboro Cigarettes">Malboro Cigarettes</a></li>
            <li><a href="/Wilston_cigarettes" title="Wilston cigarettes">Wilston cigarettes</a></li>
            <li><a href="/Strike_Cigarettes" title="Strike Cigarettes">Strike Cigarettes</a></li>
            <li><a href="/Horse_figurine" title="Horse figurine">Horse figurine</a></li>
            <li><a href="/Cat_figurine" title="Cat figurine">Cat figurine</a></li>
            <li><a href="/Bronze_lion" title="Bronze lion">Bronze lion</a></li>
            <li><a href="/Wooden_clock"...

CSS

li {
  display: none;
}

JavaScript

$(document).ready(function(){
    $("#filter").keyup(function(){
    
     var len = $(this).val().length;

     if (len >= 3) {
 
        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), 
        count = 0;
     
     		if (filter == 0) {
        $("nav ul li").hide();
        
        }
 
        // Loop through the comment list
        $("nav ul li").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).hide();
 
            // 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("Number of Comments = "+count);
        }
    });
    
});