Живой поиск для сайта. Часть 2

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

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

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

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

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

$(function(){

 $("#search").autocomplete({
  source: 'search.php',
 });

});

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
echo 'Привет, мир!';

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

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

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

$db = mysqli_connect("localhost", "root", "", "world") or die("Нет соединения с БД");
mysqli_set_charset($db, "utf8") or die("Не установлена кодировка соединения");

/**
* поиск автокомплит
**/
function search_autocomplete(){
 global $db;
 $search = trim(mysqli_real_escape_string($db, $_GET['term']));
 $query = "SELECT Name FROM city WHERE Name LIKE '%{$search}%' LIMIT 10";
 $res = mysqli_query($db, $query);
 $result_search = array();
 while($row = mysqli_fetch_assoc($res)){
  $result_search[] = array('label' => $row['Name']);
 }
 return $result_search;
}

if(!empty($_GET['term'])){
 $search = search_autocomplete();
 exit( json_encode($search) );
}

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

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

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

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

$(function(){

 $("#search").autocomplete({
  source: 'search.php',
  minLength: 3,
  select: function( event, ui ){
 window.location = 'search.php?search=' + encodeURIComponent(ui.item.value);
  }
 });

});

Теперь при выборе варианта мы отправимся на страницу search.php с GET параметром search и выбранным городом. Остается лишь принять этот запрос и выдать всю необходимую по нему информацию… но это уже тема отдельной статьи.

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Дмитрий

    Здравствуйте:)

    Скажите, пожалуйста, а возможно такой поиск подключить на каталог товаров?

    Допустим у меня на сайте выводится много товаров от 500 штук с пагинацией, хотелось бы подключить живой поиск для категорий, допустим человек зашел в категорию «Мягкие игрушки» и там над товарами было поле для ввода конкретного товара, т.е. поиск, по введенному значению тут же подгружались только те товары, которые удовлетворяют его введенному названию.

    Возможно так сделать с этим плагином? И подскажите, пожалуйста, как это можно реализовать. Хотя бы намекните:)

    Спасибо большое!

    • Андрей Кудлай

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

  2. Дмитрий

    А возможно по ключевому слову, чтобы в шаблоне подгружались те товары, которые соответствуют ключевому? Т.е., чтобы товары появлялись не, как в виде выпадающего списка в обычном поиске, а менялись уже в отображенном шаблоне без перезагрузки — не нужные скрывались а нужные показывались, при том, что есть пагинация. Подскажите какой для этого нужен плагин. Я нашел, но он работает только без пагинации.

    • Андрей Кудлай

      Сделать можно. Плагин не подскажу, поскольку никогда в таком не возникала необходимость. А суть решения та же. Сейчас запрос идет на сервер и сервер возвращает только наименования товаров, которые подгружаются в выпадающий список. Вместо этого нужно получать все прочие данные товара (цена и т.д.) и выводить не в выпадающий список, а в блок контента.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree