Живой поиск по БД с помощью jQuery и PHP

Рассмотрим рабочий вариант скрипта, который позволит 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

<?php header(‘Content-Type: text/html; charset=utf-8’);

//подключаемся к БД
$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’ => ‘
<div class=”uirezultbd_tr”>
<div class=”uirezultbd_td25″>’.htmlspecialchars($podrow[‘id’], ENT_QUOTES).'</div>
<div class=”uirezultbd_td25″>’.htmlspecialchars($podrow[‘title’], ENT_QUOTES).'</div>
<div class=”uirezultbd_td25″>’.htmlspecialchars($podrow[‘created’], ENT_QUOTES).'</a></div>
<div class=”uirezultbd_td25″><a href=”/index.php?option=com_map&id=’.htmlspecialchars($podrow[‘id’], ENT_QUOTES).'”>Смотреть подробнее</a></div>
</div>’,
‘value’ => $podrow[‘title’]);
$count++;
}
if ($count == 0) $return_arr[0] = array(‘label’ => ‘По данному запросу ничего не найдено!’, ‘value’ => ‘Попробуйте ввести другой запрос!’);
echo json_encode($return_arr, JSON_UNESCAPED_UNICODE); //возвращает результаты поиска скрипту
}

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

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

Кстати, для этого способа модифицирован jquery-ui.js, в строке: return $( “<li>” ).html(item.label).appendTo(ul); ставим html вместо text.