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

Задача:

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


Решение:

1) С СЧЁТЧИКОМ

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); }); });

2) ПРОСТОЕ (без счётчика)

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(); } }); }); });
Похожие решения:
Изменено: 08 10 2019
Просмотров: 335

Комментарии

Написать