Пример асинхронно выпадающего списка товаров, при вводе одного и более символов содержащихся в названиях.

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

Данный модуль сделан на совокупности двух языков JavaScript и PHP в результате чего и получаем технологию AJAX (асинхронный Javascript And Xml) – вывод без перезагрузки страницы.

search-ajax

Функция непосредственно связана с окошком поиска, содержащего различные термины. Как только мы начинаем вводить текст, то сразу же рядом выводится список похожих тем или товары с миниатюрами и другими характеристиками, что непосредственно делает поиск более удобным.

Смотрится такой поиск красиво, современно и говорит об высоком уровне сайта. Большим плюсом является удобство для пользователя так, как он сразу видит нужные ему варианты без перезагрузки страницы.

Есть много библиотек, модулей и плагинов где эта функция встроена с массой всевозможных настроек, но все они сделаны на JavaScript и PHP. Основу этого эффекта я описываю далее в  примерах.

Данный скрипт можно написать на чистом JavaScript, или с использованием библиотеки jQuery. Я продемонстрирую вам, как работают оба варианта.

Совпавший фрагмент будем искать, с помощью функций PHP в базе данных MySQL.

В первом файле search.html мы создаем форму для ввода поискового фрагмента и DIV блок, в который будем выводить пришедший ответ с сервера.

Строение функционала AJAX

В форме стоит событие onkeyup (срабатывающее на нажатие клавиши), оно запускает функцию view_list_items(), что считывает поле (value) и передаёт AJAX функции, которая имитирует POST, запрос передавая считанное поле файлу search.php.

В файле search.php написана функция, которая проводит такую проверку:  если пришёл пост, тогда подключаемся к БД и тело поста передаём в запрос к БД –
SELECT …. LIKE % (тело поста) %.
Результат возвращается обратно и при помощи функции innerHTML вставляем в контейнер div.

myfile.html

файл search.php

ПРИМЕЧАНИЕ: Если мы хотим, чтобы AJAX запросы поддерживались кроссбраузерно в старых браузерах, то нужно добавить ещё одну функцию – getXmlHttpRequest() и теперь создаём объект REQ, через добавленную – var REQ = new getXmlHttpRequest().

Следующий вариант сделан аналогично но уже на jQuery.

C ним всё значительно проще. Подключаем библиотеку jQuery и переписываем функцию function view_list_items(), в соответствии с jQuery синтаксисом. Событие keyup() – срабатывает, при нажатии на кнопку и запускает функцию view_list_items().В функции view_list_items() мы считываем из окна инпут данные и постом передаём их файлу search.php. Вернувшийся результат вставляем в блок с id=div $(“#div”).html(data);

1 Бал2 Бала3  Бала4  Бала5  Балов
loadingЗагрузка...

<<< >>>

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