Ozzy Pro

02 декабря 2022, 22:58
 286

Живой поиск и фильтрация данных 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)
    });
  });
});
Работаем с TimeWeb
Все наши проекты на хостинге TimeWeb - проверено временем.
Регистрируйся
  • Виртуальный хостинг - от 196 ₽ в месяц
  • Аренда VDS и VPS - от 169 ₽ в месяц
  • Выделенные серверы - от 4 941 ₽ в месяц
  • Конструктор сайтов - 159 ₽ в месяц
  • Быстрый хостинг
  • Облачные серверы
  • Цена + качество
  • Поддержка 24/7
  • Надежные дата-центры
  • Своя панель управления
  • Бесперебойная работа
← Живой поиск и фильтрация данных по таблице JS jQuery↑ БлогМеждународная маска для телефона JS jQuery →
02 декабря 2022, 22:58    Сергей Глазунов Блог 0    287 0

Комментарии ()