Живой поиск для сайта

Сегодня я напишу статью, о том как сделать простую версию так называемого «живого поиска». Для тех кто не в курсе, живой поиск — это когда при вводе искомого текста, появляется подсказка, с возможными вариантами. Примером тому служит Яндекс и Google.

По сути «живой поиск» это обычный AJAX скрипт, который обращается к базе данных, производит в ней поиск, и возвращает ответ скрипту. Для работы поиска я буду использовать Jquery.

Итак, создадим простую форму поиска:

Обратите внимание на autocomplete="off" у input’а, это для того чтобы отключить подсказки браузера, которые он показывает при повторном наборе текста в форме.

Теперь займемся созданием javascript скрипта.

Я постарался описать этот скрипт по максимуму в комментариях. По сути скрипт делется на несколько частей:

  1. Считываем ввод с клавиатуры, получаем данные из базы данных и выводим их
  2. Делаем скрытие слоя с подсказками, при нажатии на Escape и Enter
  3. Делаем переход по слою с подсказками, через нажатие стрелок клавиатуры ( вверх и вниз)
  4. Скрытие слоя с подсказками при клике на поле сайта и открытие его при клике на input
  5. При клике на подсказку мы вписываем слово в input поиска и прячем форму подсказки.

Дата публикации: 2016-10-25

От автора: приветствую вас друзья. В этой статье мы с вами продолжим реализацию живого поиска для сайта. Что такое живой поиск? Вы с ним сталкиваетесь постоянно, когда что-то ищете в Гугле или Яндексе. Как только вы начинаете набирать поисковый запрос, поисковик тут же начинает предлагать вам варианты, из которых вам остается лишь выбрать наиболее подходящий. Удобная штука, не так ли? Попробуем и мы реализовать нечто подобное.

Исходные файлы текущей статьи вы можете скачать по ссылке. Первую часть статьи вы можете найти по ссылке.

Итак, в первой части мы подготовили базу данных, которая будет использована для живого поиска, а также прикрутили виджет Autocomplete библиотеки jQuery UI к полю поиска на нашей странице. Пока что виджет работает с тестовыми данными, но сейчас мы с вами это исправим.

Прежде всего укажем для виджета другой источник данных, это будет, скажем, файл search.php, который нам необходимо также создать.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В файле search.php я напишу простейший код, выводящий приветствие:

Теперь наберу любой символ в поле поиска и посмотрю, что происходит при этом в консоли браузера.

Как видим, отправляется GET запрос с параметром term, значением которого является строка, набранная в поле поиска. При этом все происходит асинхронно, без перезагрузки страницы, т.е. используется AJAX.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Отлично, теперь остается лишь принять поступивший поисковый запрос и выдать ответ на него. Для этого потребуется организовать подключение к серверу БД и написать несложный код, получающий данные из БД по запросу. Код файл search.php будет примерно таким:

Обратите внимание, функция search_autocomplete, которая и получает данные по запросу, должна возвращать эти данные в определенном формате, это должен быть массив с ключами label и значениями найденных городов. После вызова функции данные необходимо преобразовать в формат JSON.

Остается проверить работу нашего живого поиска. Для этого, как и в прошлый раз, наберем всего одну букву — a:

Отлично! В ответ мы получили десяток городов, в названии которых встречается введенная буква. Если мы продолжим набирать название, список вариантов будет изменяться, т.е. с каждой буквой будет отправляться новый запрос AJAX.

Вот, собственно, и все, живой поиск работает. Что еще можно сделать? Во-первых, я бы ограничил отправляемые ajax запросы, чтобы снизить нагрузку на сервер. Сейчас запросы отправляются, начиная с первой введенной буквы. Я бы начинал, скажем, с третьей буквы. Это можно сделать с помощью опции minLength. Также при выборе варианта необходимо отправлять запрос на сервер, который вытащит всю информацию по выбранному варианту. Это поможет сделать опция select:

Рассмотрим рабочий вариант скрипта, который позволит 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)) <
//формируем ассоциативный массив результата поиска
$return_arr[] = array(
‘label’ => ‘

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

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

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Adblock detector