Живой поиск на Битрикс. Пример реализации.

49a91a4ebb

Основные задачи:

  • реализовать поиск таким образом, чтобы после ввода поискового запроса в строку, ниже этой строки появились результаты поиска
  • запрос на получение результата должен происходить только после окончания ввода поискового запроса

Окей, поехали!

Примерная вёрстка самого блока с поисковой строкой и div-ником, куда будем добавлять результаты поиска:

Т.к. поиск доступен в шапке сайта, добавим соответствующие скрипты поиска и стилизации результатов:

Теперь посмотрим, что лежит в нашем ajax_search.js:

keyup функция осуществляем вызов функции get_result(), которая собственно и заполняет div-ник с id=»search_result» по аяксу.

mCustomScrollbar — это просто вызов стилизации (можете отключить).

Данные от /search/ajax_search.php мы получаем в формате JSON.

С JS составляющей всё понятно, теперь посмотрим, что происходит в ajax_search.php:

В данном случае поиск осуществляется методом Search Битриксового класса CSearch. В PARAM2 пишем в каком инфоблоке ищем. Результаты поиска запихиваем в массив $result. Обратите внимание, что в $res[‘ITEM_ID’] может быть как элемент, так и раздел. В зависимости от того, что нашли, в $result_item[‘BODY_FORMATED’] пихаем либо название раздела, либо кусок текста из найдённого элемента инфоблока.

Собственно вся магия 🙂

 

4 комментария

  1. Здорово написано и что важно — без доп плагина jQuery Autocomplite. Сразу понятна вся логика работы. Большое спасибо за статью.

Оставить комментарий

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