Быстрый поиск по странице

Быстрый поиск по странице или фильтр, без перезагрузки на jQuery

Демонстрация

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>

<ol class="commentlist">
  <li>Первый день</li>
  <li>Второй месяц</li>
  <li>Третий день</li>
  <li>Четвёртый год</li>
</ol>

CSS

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}

JS

$(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
        $(".commentlist 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).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("Number of Comments = "+count);
    });
});

HTML

<input type="text" id="filter">

<ol class="commentlist">
  <li>Первый день</li>
  <li>Второй месяц</li>
  <li>Третий день</li>
  <li>Четвёртый год</li>
</ol>

JS

$(document).ready(function(){
    $("#filter").keyup(function(){
        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val();
        // Loop through the comment list
        $(".commentlist 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).fadeOut();
            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
            }
        });
    });
});