02 декабря 2022, 22:58
105
Живой поиск и фильтрация данных JS jQuery
JS jQuery быстрая фильтрация и поиск данных по в вводу в поле input.
Вводя в поле input ключевые слова, поиск сразу налету скрывает неподходящие результаты, оставляя только подходящие. Так получается живой поиск фильтрация.
Этот скрипт отличается от поиска по таблице, тут можно фильтровать быстро например бренды/производителей в фильтре брендов для интернет-магазинов.
Jopa
Drova
Leto
Zima
Таракан
Жопа бобра
<input type="text" name="search-vendor" value="" placeholder="Живой поиск" />
<br/><br/>
<div id="filter-vendor">
<div class="check-group"><span>Jopa</span></div>
<div class="check-group"><span>Drova</span></div>
<div class="check-group"><span>Leto</span></div>
<div class="check-group"><span>Zima</span></div>
<div class="check-group"><span>Таракан</span></div>
<div class="check-group"><span>Жопа бобра</span></div>
</div>$(document).ready(function(){
$('input[name="search-vendor"]').on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#filter-vendor .check-group").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Комментарии ()