Живой поиск jQuery

Живой поиск jQuery

12 апреля 2020 JavaScript

Сегодня я расскажу об одном отличном 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 на страницу

Разархивируем ранее скачанные файлы плагина и подключаем их на страницы сайта:

<script type="text/javascript" src="jquery-2.0.2.min.js">
<script type="text/javascript" src="jquery.hideseek.min.js">

Шаг 3. Добавляем HTML разметку

<input id="search" name="search" placeholder="Поиск..." type="text" data-list=".list">
<ul class="list">
  <li>элемент 1</li>
  <li>...</li>
  <li><a href="#">элемент 2</a></li>
</ul>

или так

<input id="search" name="search" placeholder="Поиск..." type="text" data-list=".list">
<div class="list">
  <span>элемент 1</span>
  <span>...</span>
  <span>элемент 2</span>
</div>

Обратите внимание в атрибуте data-list указывается класс родительского тега с элементами поиска.

Шаг 4. Инициализируем плагин

Инициализировать HideSeek можно двумя способами.

1. По умолчанию:

$(document).ready(function() {
	$('#search').hideseek();
});

Здесь указываем ID поля ввода поискового запроса. В данном случае #search.

2. С помощью data-атрибута:

<input id="search" name="search" type="text" data-toggle="hideseek" data-list=".list">

Настройка плагина HideSeek

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

Так же мы предлагаем https://cs-megaboost.ru/cs.php и насладиться игрой в стрелялки по полной.

Подсветка текста

$('#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

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>Контакты сотрудников компании</title>
	<!-- Bootstrap core CSS -->
	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<!-- Page Content -->
	<div class="container">
		<h1>Контакты сотрудников компании</h1>
		<div class="input-group mb-3">
			<!-- HideSeek Input -->
			<input id="search" class="form-control" name="search" placeholder="Найти сотрудника..." type="text" data-list=".list">
		</div>	
		<div class="row list">
			<div class="col-md-4 mb-5">
				<div class="card h-100">
					<img class="card-img-top" src="http://placehold.it/700x400" alt="">
					<div class="card-body">
						<h2 class="card-title">Иванов Иван Иванович</h2>
						<p class="card-text">Тел. +7 (000) 000-00-00<br/>
						E-mail: mail@mail.ru
						</p>
					</div>
				</div>
			</div>
			<!-- /.col-md-4 -->
			<div class="col-md-4 mb-5">
				<div class="card h-100">
					<img class="card-img-top" src="http://placehold.it/700x400" alt="">
					<div class="card-body">
						<h2 class="card-title">Петров Петр Петрович</h2>
						<p class="card-text">Тел. +7 (000) 000-00-00<br/>
						E-mail: mail@mail.ru
						</p>
					</div>
				</div>
			</div>
			<!-- /.col-md-4 -->
			<div class="col-md-4 mb-5">
				<div class="card h-100">
					<img class="card-img-top" src="http://placehold.it/700x400" alt="">
					<div class="card-body">
						<h2 class="card-title">Сидоров Сидор Сидорович</h2>
						<p class="card-text">Тел. +7 (000) 000-00-00<br/>
						E-mail: mail@mail.ru
						</p>
					</div>
				</div>
			</div>
			<!-- /.col-md-4 -->
		</div>
		<!-- /.row -->
	</div>
	<!-- /.container -->
	<!-- Bootstrap core JavaScript -->
	<script src="vendor/jquery/jquery.min.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<!-- jQuery HideSeek -->
	<script type="text/javascript" src="jquery.hideseek.min.js"></script>
	<script>
		$(document).ready(function() {
			$('#search').hideseek({highlight: true});
		});
	</script>
</body>
</html>

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

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

Заключение

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

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Как запретить переход по ссылке и отменить действия по умолчанию на JavaScript

Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее

Автоопределение города по IP на сайте

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

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее

3 комментария на «Живой поиск jQuery»

  1. Артур:
    12.12.2020 в 10:34

    лучший плагин для поиска!

    Ответить
  2. Иван:
    14.05.2021 в 22:57

    Лучший

    Ответить
  3. Камиль:
    13.04.2022 в 04:19

    Супер! Долго искал решение! 50 руб. кину. Спасибо

    Ответить

Добавить комментарий

*

code

Поиск
Категории
Теги
ACF Ajax amoCRM Bootstrap CentOS Git Instagram jQuery MacOS MySQL SEO Telegram YouTube Битрикс24 Яндекс
Подписаться
каркасные ангары быстровозводимые Монтаж производился довольно быстро. К тому же, хочу отметить простую доставку к месту. По стоимости нареканий никаких нет, смета на возведение оказалась низкой и предельно честной.
рингтоны на телефон