Иногда в форме поиска нужно быстро найти желаемый элемент без перехода, другими словами, организовать такой себе живой поиск в реальном времени, сегодня мы хотим рассказать как это сделать, с фильтрацией списков с плавными переходами на jQuery и JS. Фильтр поиска jQuery позволяет использовать функцию прямого поиска в списке HTML, что позволяет пользователю динамически фильтровать длинные списки через поле поиска. Весьма удобная функция когда ваш ресурс разрастается и на нем хранится множество информации и значений.

 

Если вы хотите использовать уже готовый вариант, тогда обратите внимание на готовые шаблоны наших партнеров, там есть как бесплатные шаблоны для сайтов, так и премиум предложения с техподдержкой и помощью с установкой и настройкой:

Шаг 1. HTML

Для начала создайте поле поиска в реальном времени рядом со списком html следующим образом:

Создаем счетчик списков, отображающий количество результатов:

С разметкой вроде разобрались, осталась маленькая деталь, вам стоит подключить скрипты к вашей странице:

Включите javascript-библиотеку jQuery в нижней части страницы.

Шаг 2. CSS

Нам необходимо немного добавить стилей, для общей визуализации демонстрации и приятного отображения списка, для этого у нас будут следующие классы:

Шаг 3. JS

Нам потребуется следующий JavaScript, чтобы включить функцию поиска в реальном времени в нашем списке:

В результате у нас получилась достаточно простая, но функциональная форма фильтрации и поиска нужной информации на сайте, думаю для вас она станет полезной.

Вот и все. Готово!