Живой поиск jquery ajax php

AJAX можно использовать для создания более удобных и интерактивных поисковых запросов.

AJAX Живой поиск

В следующем примере демонстрируется поиск в реальном времени, где вы получаете результаты поиска во время ввода.

Живой поиск имеет много преимуществ по сравнению с традиционным поиском:

  • Результаты отображаются по мере ввода
  • Результаты сужаются по мере ввода
  • Если результаты становятся слишком узкими, удалите символы, чтобы увидеть более широкий результат

Найдите страницу SchoolsW3 в поле ввода ниже:

Результаты в приведенном выше примере находятся в XML файле (links.xml). Сделать это пример небольшой и простой, доступно только шесть результатов.

Объяснение примера – HTML страницы

Когда пользователь вводит символ в поле ввода выше, выполняется функция "showResult()" . Функция запускается с помощью событие "onkeyup" :

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

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

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

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

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

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

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

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

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

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

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

Adblock detector