jQuery live search

by Newton Anbarasu

HTML

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

<nav>
    <ul>
        <li><a href="#">Jim James</a></li>
        <li><a href="#">Hello Bye</a></li>
        <li><a href="#">Wassup Food</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Bleep bloop</a></li>
        <li><a href="#">jQuery HTML</a></li>
        <li><a href="#">CSS HTML AJAX</a></li>
        <li><a href="#">HTML5 Net Set</a></li>
        <li><a href="#">Node Easy</a></li>
        <li><a href="#">Listing Bloop</a></li>
        <li><a href="#">Contact HTML5</a></li>
        <li><a href="#">CSS3 Ajax</a></li>
        <li><a href="#">ET</a></li>
    </ul>
</nav>

JavaScript

$(document).ready(function(){
    $("#filter").keyup(function(){

        var filter = $(this).val(), count = 0;
 
        $("nav ul li").each(function(){
 
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
 
            } else {
                $(this).show();
                count++;
            }
        });
 
        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = "+count);
    });
});