Живой поиск jQuery
12 апреля 2020 JavaScript jQuery
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek.
Плагин очень прост в использовании, но в то же время имеет много настроек. HideSeek совместим с IE7+, Chrome, Firefox, Safari, jQuery 1.8.x, 1.9.x, 1.11.x, 1.12.x, 2.1.x, 2.2.x и поддерживает подсветку текста, настраиваемые сообщения, навигацию, инициализацию через data-атрибут, настраиваемые события и многое другое. Неплохо, неправда ли?
Где это может пригодится? Ну к примеру для страницы с структурой компании и контактами сотрудников. Если сотрудников много, то будет логично сделать поиск по фамилии или должности. Так вот с помощью плагина HideSeek вы создадите такой поиск за считанные минуты.
Давайте рассмотрим по шагам как подключить и использовать плагин.
Шаг 1. Скачиваем плагин
Скачать плагин можно на официальном сайте. Там же вы можете найти примеры его использования и документацию.
Шаг 2. Подключаем jQuery и HideSeek на страницу
Разархивируем ранее скачанные файлы плагина и подключаем их на страницы сайта:
Шаг 3. Добавляем HTML разметку
- элемент 1
- …
- элемент 2
или так
элемент 1 ... элемент 2
Обратите внимание в атрибуте data-list
указывается класс родительского тега с элементами поиска.
Шаг 4. Инициализируем плагин
Инициализировать HideSeek можно двумя способами.
1. По умолчанию:
$(document).ready(function() { $('#search').hideseek(); });
Здесь указываем ID поля ввода поискового запроса. В данном случае #search
.
2. С помощью data-атрибута:
Настройка плагина HideSeek
Как видите использовать плагин очень просто. Давайте рассмотрим его некоторые настройки, которые могут пригодится.
Подсветка текста
$('#search-highlight').hideseek({ highlight: true });
Текст сообщения, если нет результатов
$('#search-nodata').hideseek({ nodata: 'Результаты не найдены' });
Исключить элементы из поиска
$('#search-ignore').hideseek({ highlight: true, ignore: '.ignore' });
Скрывать элементы по умолчанию
$('#search-hidden-mode').hideseek({ hidden_mode: true });
Событие после поиска
$('.after_event').hideseek(); $('.after_event').on("_after", function() { alert('Это сообщение выводится после того, как поиск закончен!') });
Пример на Bootstrap
Давайте теперь попробуем воплотить в жизнь тот пример со страницей контактов, о котором я писал в начале статьи.
Создадим страницу на начальном шаблоне Bootstrap. Представим, что это будут карточки с именем сотрудника, его фото и контактами. А над карточками будет поле ввода поискового запроса.
У меня получилось примерно следующее:
Контакты сотрудников компании на Bootstrap
Исходный код страницы:
Контакты сотрудников компании
Контакты сотрудников компании
Иванов Иван Иванович
Тел. +7 (000) 000-00-00
E-mail: [email protected]![]()
Петров Петр Петрович
Тел. +7 (000) 000-00-00
E-mail: [email protected]![]()
Сидоров Сидор Сидорович
Тел. +7 (000) 000-00-00
E-mail: [email protected] $(document).ready(function() { $('#search').hideseek({highlight: true}); });
А вот результат работы плагина HideSeek:
Как вы можете видеть, плагин отфильтровал запись по имени сотрудника, и подсветил найденную часть текста.
Заключение
Думаю jQuery плагин HideSeek найдет свое место в вашем арсенале JavaScript инструментов, а это руководство надеюсь поможет вам создать простой и функциональный живой поиск на jQuery. Всем спасибо и удачи!