Живой поиск jQuery

hideseek-9852458

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. Представим, что это будут карточки с именем сотрудника, его фото и контактами. А над карточками будет поле ввода поискового запроса.

У меня получилось примерно следующее:

hideseek1-1024x457-7590692 Контакты сотрудников компании на Bootstrap

Исходный код страницы:



        
        
        
        
        Контакты сотрудников компании
        
        


        
        
                

Контакты сотрудников компании

                
                        
                        
                    
                
                        
                                
                                        
                                        
                                                

Иванов Иван Иванович

                                                
Тел. +7 (000) 000-00-00
E-mail: mail@mail.ru

Петров Петр Петрович

                                                
Тел. +7 (000) 000-00-00
E-mail: mail@mail.ru

Сидоров Сидор Сидорович

                                                
Тел. +7 (000) 000-00-00
E-mail: mail@mail.ru $(document).ready(function() { $('#search').hideseek({highlight: true}); });

А вот результат работы плагина HideSeek:

hideseek2-1024x460-6307049

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

Заключение

Думаю jQuery плагин HideSeek найдет свое место в вашем арсенале JavaScript инструментов, а это руководство надеюсь поможет вам создать простой и функциональный живой поиск на jQuery. Всем спасибо и удачи!

Читайте также: