Урок 25. Создание AJAX поиска на сайте

Создадим живой AJAX поиск на сайте. Для этого нам понадобятся:

Установка mSearch и индексация страниц сайта

Установим дополнение mSearch через репозиторий дополнений и проиндексируем все наши ресурсы. Для этого нужно вызвать на любом удобном вам ресурсе вызов mSearch в виде:

Это проиндексирует первые 500 ресурсов, далее выставляем значение offset=`500` и индексируете следующие 500 ресурсов и т.д.

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

После того как вы проиндексировали всё 1 раз, все новосозданные или изменённые ресурсы индексирует плагин, который идёт в комплекте с mSearch, более подробно: http://bezumkin.ru/modx/msearch/

Создание страницы приёма поисковых запросов

Создадим страницу, которая будет принимать поисковые AJAX запросы и отправлять ответы в виде HTML кода на целевую страницу. Создадим её с названием search-results и этим же псевдонимом search-results, назначим пустой шаблон и сохраним. URL, по которому должна отрываться страница, будет в таком случае yoursite.com/search-results.html. Вставим следующий код в поле "Содержимое" (Content):

После сохранения нажмём "Просмотр" и создадим парочку запросов к этой странице для проверки её работоспособности, например вот так (ссылки кликабельны): ?query=resource ?query=modx. После проверки работоспособности перейдём к созданию самой страницы поиска.

Создание AJAX страницы поиска

Данная страница будет отправлять GET запрос по адресу yoursite.com/search-results.html и получать от неё ответ в виде html кода - это и есть наш AJAX. Создадим чанк ajax-search и вставим туда код или просто вставим в код шаблона этот код:

Форма с классом .sisea-search-form отправляет GET запрос, далее наша страница должна принять данный код и вставить его в контейнер с классом .site-search-results. Вставим следующий скрипт, который будет это делать, в HEAD нашего сайта:

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

Рекомендую для изучения

Демо AJAX поиск