jquery поиск по сайту

Рассмотрим рабочий вариант скрипта, который позволит ajax методом получать результаты поиска из БД при вводе пользователем поисковых запросов. Реализовывать это все мы будем за счет одного виджета autocomplete библиотеки jquery-ui.js

О том как делать автозаполнение полей я писал ранее и даже говорил о принципе поиска через PHP. Поэтому сегодня хочу более подробно рассмотреть процесс выгрузки результатов поиска не только в низпадайке (как если бы это был выпадайющий список), но и процесс создания таблицы результатов поиска с любыми данными из БД (ссылки, картинки, id номера, любые поля).

Создайте index.html , подключите в нем скрипты (как в моем примере) и пропишите код:

Из предыдущей публикации вы уже должны разбираться, что делает каждая строка. Обратим внимание на ключевые моменты.

• source — источник поиска, в данном случае файл, который лежит в той же директории, что и index.html
• minLength — минимальное число символов, чтобы поиск начал искать
• appendTo: ‘.uirezultbd’ — в какой html вставить результаты поиска (если убрать, будет низпадайкой, как в обычном случае)
• open: function(event, ui) — действие в момент поиска (когда набирается текст) — добавляем шапку результатов поиска

Т.е. скрипт работает так: когда мы вводим что-то в поле name=»s_search5″ , то идет обращение с этим запросом (как $_GET[‘term’] ) к файлу poiskbest.php . В нем делаем подключение к БД и ищем столбец методом LIKE на совпадение. Если что-то найдется, то возвратится JSON ответ, который подхватит наш скрипт в index.html. А результат поиска отобразится в классе uirezultbd .

Теперь рассмотрим poiskbest.php

//подключаемся к БД
$thisbd = @mysqli_connect(‘localhost’, ‘root’, », ‘swork’) or die(«Ошибка соединения с базой данных: «.mysql_error());
mysqli_query($thisbd, «SET NAMES utf8»);

$count = 0;
if($_GET[‘search_tip’] == ‘title’) < //Тип поиска - таких может быть бесконечно много - передается с autocomplete
$fetch = mysqli_query($thisbd, «SELECT * FROM wl8ac_content WHERE title LIKE ‘».mysqli_real_escape_string($thisbd, $_GET[‘term’]).»%’ ORDER BY title LIMIT 20″); //$_GET[‘term’] — поисковый запрос от autocomplete
while ($podrow = mysqli_fetch_array($fetch))
‘

Я думаю, из комментариев, которые есть в коде все ясно. Если кратко повторить, то сначала подключаемся к БД и ищем в таблице wl8ac_content (кстати, это материалы Joomla) записи по полю title. Также ограничиваем результаты поиска до 20 ( LIMIT 20 ). Далее формируем ассоциативный массив (в нем должны быть обязательно 2 параметра label и value ) из нужных полей, которые отобразятся в результатах. Для примера я взял 3 поля id, title, created , а 4-й «столбец» сделал ссылкой на материал. После того, как массив будет создан, возвратим данные методом json_encode() .

Весь этот скрипт и связь между autocomplete и полями я собрал методом проб и ошибок. Вы можете его подстроить так, как вам нужно. Мне нужно было лишь показать принцип взаимодействия.

Как правильно сделать живой поиск на сайте? Сделал запрос на сервер по keyup, но если пользователь набирает слово кирпич, то скрипт по каждой набранной букве отправляет запрос на сервер, тем самым, если пользователь наберет быстро, то он приходится ждать пока окончательный список сформируется, завершив поиск по каждой букве. А если набирая слово универсальный, написать униВВ, то результаты пропадают, тогда как на других сайтах, остается последний удачный результат. Вот тут например сделан по нормальному https://santika-online.ru

Какие механизмы для этого есть?

• Вопрос задан 17 июн.
• 1279 просмотров

Для работы с полями ввода есть набор событий:
1. focus — пользователь поставил фокус на поле ввода.
2. blur — пользователь убрал фокус с элемента вода.
3. input — пользователь как-то что-то ввел. Это лучше, чем keyup, ибо не надо проверки keyCode, второе потому что пользователь может в поле вставить текст, что тогда будет с Вашим keyUp? Событие input срабатывает каждый раз, как пользователь сделал изменение в поле ввода.
4. change — пользователь ввел данные и убрал фокус с поля ввода, то есть это input + blur. Событие происходит не так часто, как input, но и не заставляет проверять value на изменение, как это придется делать при blur.
5. submit — срабатывает на всей форме, при попытке отправить данные, в данной задаче скорее не интересное событие.

Для живого поиска логично использовать input, по которому надо отправить текущее value через ajax на сервер и далее ответ куда-то распечатать. Вопрос в другом, ведь событие срабатывает довольно часто, и кто-то печатает так быстро, что и запрос-ответ не успеет, поэтому логично сделать тут debounce с задержкой в приблизительно 300мс, чтобы отправка/получение сработало когда пользователь притормозил в наборе текста или вообще прекратил ввод.

Недав­но мы гово­ри­ли о биб­лио­те­ках и фрейм­вор­ках — и обе­ща­ли, что попро­бу­ем что-нибудь на них собрать. Наста­ло вре­мя.

Сего­дня мы возь­мём попу­ляр­ную биб­лио­те­ку jQuery и сде­ла­ем на её осно­ве поиск по стра­ни­це. Бра­у­зе­ры это уме­ют делать встро­ен­ны­ми инстру­мен­та­ми, но с помо­щью наше­го мето­да мож­но будет более тон­ко всё настро­ить и сде­лать поле поис­ка види­мым и удоб­ным.

• биб­лио­те­ка jQuery — она обес­пе­чит рабо­ту наше­го поис­ко­во­го пла­ги­на, пото­му что пла­гин сде­лан тоже для jQuery.
• пла­гин highlight — помо­жет нам най­ти нуж­ные сло­ва в тек­сте и под­све­тить их при­ят­ным цве­том (каким захо­тим)
• поле вво­да и кноп­ка — отве­ча­ют за сам интер­фейс поис­ка.

Содержание

1. Общая идея
2. Готовим каркас
3. Добавляем форму поиска и текст
4. Общая идея
5. Настраиваем стили
6. Пишем скрипт
7. Как можно улучшить

Общая идея

У нас есть сайт с неким тек­стом, и нам нуж­но быст­ро нахо­дить в нём нуж­ные сло­ва или части слов. Для это­го мы в самом нача­ле стра­ни­цы дела­ем поле вво­да, куда будем писать наши сло­ва для поис­ка, и кноп­ку, кото­рая этот поиск запус­ка­ет.

Даль­ше скрипт берёт весь текст, нахо­дит в нём нуж­ные фраг­мен­ты и под­све­чи­ва­ет их. Если он ниче­го не нахо­дит — пишет сооб­ще­ние о том, что таких слов в тек­сте нет.

Готовим каркас

Сде­ла­ем как обыч­но — возь­мём наш стан­дарт­ный шаб­лон из преды­ду­щих задач и немно­го попра­вим опи­са­ния раз­де­лов. Сохра­ним его как .html-файл и откры­вать в бра­у­зе­ре пока не будем — всё рав­но мы ниче­го не уви­дим на стра­ни­це, кро­ме назва­ния вклад­ки.

Добавляем форму поиска и текст

Наша фор­ма поис­ка — это поле вво­да и кноп­ка, кото­рая запус­ка­ет скрипт. Мы не будем силь­но настра­и­вать внеш­ний вид фор­мы, при жела­нии вы може­те сде­лать это сами — все нуж­ные зна­ния для это­го у вас уже есть. Если что-то забы­ли — посмот­ри­те, как мы настра­и­ва­ли вид поля вво­да в ста­тье про пла­ни­ров­щик задач.

Доба­вим код фор­мы сра­зу после тега :

Оста­лось доба­вить сам текст в блок

Общая идея

У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.

Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение, что таких слов в тексте нет.

Сохра­ня­ем, откры­ва­ем в бра­у­зе­ре:

Настраиваем стили

Сти­ли отве­ча­ют за внеш­ний вид всех эле­мен­тов на стра­ни­це. Глав­ное, что нам нуж­но сде­лать, — нор­маль­ный внеш­ний вид фор­мы поис­ка и выбрать под­свет­ку для най­ден­ных резуль­та­тов. Это мы настро­им в бло­ке в нача­ле стра­ни­цы:

Сохра­ня­ем и обнов­ля­ем стра­ни­цу — теперь фор­ма выгля­дит луч­ше:

Пишем скрипт

Зада­ча скрип­та — про­бе­жать­ся по все­му содер­жи­мо­му тек­ста и срав­нить все сло­ва с тем, что мы вве­ли в стро­ке поис­ка. Всю рабо­ту за нас сде­ла­ет пла­гин highlight, нам оста­ёт­ся толь­ко выве­сти коли­че­ство най­ден­ных сов­па­де­ний и очи­стить стра­ни­цу от преды­ду­щих резуль­та­тов поис­ка.

Как можно улучшить

Мож­но убрать кноп­ку «Най­ти» и запус­кать поиск при вво­де тек­ста в поле.

Мож­но сде­лать два поля вво­да, под­све­чи­вая най­ден­ное по каж­до­му раз­ны­ми цве­та­ми. Это полез­но, напри­мер, если нуж­но про­ана­ли­зи­ро­вать, каких слов в тек­сте боль­ше.

Регу­ляр­ные выра­же­ния! О них отдель­но напи­шем, это же про­сто празд­ник какой-то.

Источник: computermaker.info