Создания AJAX поиска на сайте в MODX Revolution с помощью mSearch
Создадим живой AJAX поиск на сайте. Для этого нам понадобятся:
- дополнение mSearch - Документация mSearch
- библиотека jquery
Установка mSearch и индексация страниц сайта
Установим дополнение mSearch через репозиторий дополнений и проиндексируем все наши ресурсы. Для этого нужно вызвать на любом удобном вам ресурсе вызов mSearch в виде:
[[!mSearch? &indexer=`1` &limit=`500` &offset=`` ]]
Это проиндексирует первые 500 ресурсов, далее выставляем значение offset=`500` и индексируете следующие 500 ресурсов и т.д.
При индексации данные перезаписываются, так что можно запускать этот процес сколько угодно раз подряд, индекс от этого не разрастается.
После того как вы проиндексировали всё 1 раз, все новосозданные или изменённые ресурсы индексирует плагин, который идёт в комплекте с mSearch, более подробно: http://bezumkin.ru/modx/msearch/
Создание страницы приёма поисковых запросов
Создадим страницу, которая будет принимать поисковые AJAX запросы и отправлять ответы в виде HTML кода на целевую страницу. Создадим её с названием search-results и этим же псевдонимом search-results, назначим пустой шаблон и сохраним. URL, по которому должна отрываться страница, будет в таком случае yoursite.com/search-results.html. Вставим следующий код в поле "Содержимое" (Content):
[[!getPage? &element=`mSearch` &limit=`5` ]] <div class="pagination"> <ul> [[!+page.nav]] </ul> </div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> if(typeof jQuery !== undefined) { //Проверка jQuery $(document).ready(function() { //Запуск при загрузке $(".pagination a").click(function(event) { //Обработка щелчка по ссылке №страницы (1,2,3 и др.) event.preventDefault(); //Предотвращает навигацию браузером по страницам $("#site-search-results").load($(this).attr('href')).show(); //Загружает следующую страницу поиска и показывает контейнер (CSS display:block;) return false; // Ещё одна заглушка }); }); } else { //никакого jQuery } </script>После сохранения нажмём "Просмотр" и создадим парочку запросов к этой странице для проверки её работоспособности, например вот так: ?query=resource ?query=modx. После проверки работоспособности перейдём к созданию самой страницы поиска.
Создание AJAX страницы поиска
Данная страница будет отправлять GET запрос по адресу yoursite.com/search-results.html и получать от неё ответ в виде html кода - это и есть наш AJAX. Создадим чанк ajax-search и вставим туда код или просто вставим в код шаблона этот код:
<form class="sisea-search-form" action="[[~[[*id]]]]" method="get"> <fieldset> <legend>AJAX поиск mSearch</legend> <label>Строка поиска</label> <input type="text" name="query" class="input-xlarge search-query" value="" placeholder="Введите запрос, например - modx"> <input type="submit" class="btn btn-success" value="Искать!" > </fieldset> </form> <div id="site-search-results"></div>
Форма с классом .sisea-search-form отправляет GET запрос, далее наша страница должна принять данный код и вставить его в контейнер с классом .site-search-results. Вставим следующий скрипт, который будет это делать, в HEAD нашего сайта:
<script type="text/javascript"> $(document).ready(function() { //Запуск при загрузке $(".sisea-search-form").submit(function () { //Обработка отправки $("#site-search-results").load("/search-results.html",$(".sisea-search-form").serialize()).show();//Загрузка результатов поиска от страницы search-results.html и показ контейнера return false; //Дополнительная заглушка }); $(".sisea-search-form input").keyup(function() { //Живой поиск if(this.value.length > 2) { //Пользователь набирает больше 2 символов в строке поиска $("#site-search-results").load("/search-results.html",$(".sisea-search-form").serialize()).show();//Загрузка результатов поиска от страницы search-results.html и показ контейнера } else { $("#site-search-results").hide(); //Если набрано меньше 2 символов, скрыть контейнер (CSS display:none;) } }); }); </script>Перед скриптом нужно вызвать библиотеку jQuery.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Вот и все!