От автора: приветствую вас друзья. В этой статье мы с вами продолжим реализацию живого поиска для сайта. Что такое живой поиск? Вы с ним сталкиваетесь постоянно, когда что-то ищете в Гугле или Яндексе. Как только вы начинаете набирать поисковый запрос, поисковик тут же начинает предлагать вам варианты, из которых вам остается лишь выбрать наиболее подходящий. Удобная штука, не так ли? Попробуем и мы реализовать нечто подобное.
Исходные файлы текущей статьи вы можете скачать по ссылке. Первую часть статьи вы можете найти по ссылке.
Итак, в первой части мы подготовили базу данных, которая будет использована для живого поиска, а также прикрутили виджет Autocomplete библиотеки jQuery UI к полю поиска на нашей странице. Пока что виджет работает с тестовыми данными, но сейчас мы с вами это исправим.
Прежде всего укажем для виджета другой источник данных, это будет, скажем, файл search.php, который нам необходимо также создать.
|
1 2 3 4 5 6 7 |
$(function(){ $("#search").autocomplete({ source: 'search.php', }); }); |
В файле search.php я напишу простейший код, выводящий приветствие:
|
1 |
echo 'Привет, мир!'; |
Теперь наберу любой символ в поле поиска и посмотрю, что происходит при этом в консоли браузера.
Как видим, отправляется GET запрос с параметром term, значением которого является строка, набранная в поле поиска. При этом все происходит асинхронно, без перезагрузки страницы, т.е. используется AJAX.
Отлично, теперь остается лишь принять поступивший поисковый запрос и выдать ответ на него. Для этого потребуется организовать подключение к серверу БД и написать несложный код, получающий данные из БД по запросу. Код файл search.php будет примерно таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$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:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(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 и выбранным городом. Остается лишь принять этот запрос и выдать всю необходимую по нему информацию… но это уже тема отдельной статьи.
На этом статья завершается. К слову, в курсе Каталог товаров более подробно показан процесс реализации живого поиска на сайте. Удачи!
Комментарии (4)