Живой поиск 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: [email protected]
						</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: [email protected]
						</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: [email protected]
						</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. Всем спасибо и удачи!

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

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

jQuery data-* атрибуты

data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее

Закрепить блок при прокрутке

Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее

Многоуровневое меню CSS

Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее

Версия страницы для печати или печать отдельного блока на сайте

В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее

Кнопка наверх для сайта

Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее

Плавный якорь jQuery

Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее

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

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

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

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

    Лучший

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

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

    Ответить

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

Поиск
Категории
Теги
ACF Ajax amoCRM Bootstrap CentOS Git Instagram jQuery MacOS MySQL SEO Telegram YouTube Битрикс24 Яндекс
Подписаться
рингтоны на телефон