Содержание:
Ajax поиск в Modx Revolution
Речь пойдёт о том, как в Modx Revo, сделать «живой поиск», который будет выводить результаты в отдельном окне, через ajax и без перезагрузки страницы.
Есть довольно интересное решение о котором хотел бы рассказать, рабочий демо пример, разместил тут: s20509.h10.modhost.pro всё реализовано на дополнении SimpleSearch, оно должно быть установлено и подключён jquery.
1. Создадим ресурс, шаблон для ресурса выбираем (Пустой шаблон), заголовок ресурса «search», отмечаем чекбокс (Скрыть из меню), делаем ресурс не кэшированным, для этого в настройках документа в пункте кэшируемый, нужно убрать галку после этого вставляем в содержимое ресурса код и жмём сохранить.
Содержимое ресурса:
2. Далее, нужно создать пять чанков:
Имя: Mysearchresult чанк содержит плейсхолдеры тв полей и обычных полей которые необходимо вывести.
Александр здравствуйте, пользуясь случаем, хотел бы поинтересоваться, можно ли как-то исходя из данного примера, с помощью чекбоксов, реализовать возможность выбора категорий, где осуществлять поиск?
Есть довольно интересное решение о котором хотел бы рассказать, рабочий демо пример, разместил тут: s20509.h10.modhost.pro всё реализовано на дополнении SimpleSearch, оно должно быть установлено и подключён jquery.
1. Создадим ресурс, шаблон для ресурса выбираем (Пустой шаблон), заголовок ресурса «search», отмечаем чекбокс (Скрыть из меню), делаем ресурс не кэшированным, для этого в настройках документа в пункте кэшируемый, нужно убрать галку после этого вставляем в содержимое ресурса код и жмём сохранить.
Содержимое ресурса:
<!DOCTYPE HTML> <html><head> <meta charset="[[++modx_charset]]" /> <meta name="robots" content="none" /> <title>search results</title> <script> if(typeof jQuery !== undefined) { $(document).ready(function() { $(".sisea-page a").click(function(event) { // пагинация event.preventDefault(); // Предотвращает навигацию браузером по страницам // Загружает следующую страницу поиска и показывает контейнер $("#site-search-results").load($(this).attr('href')).show(); return false; // заглушка }); }); } </script> </head><body> [[!SimpleSearch? &tpl=`Mysearchresult` &containerTpl=`SimpleSearchOuter` &pageTpl=`SimpleSearchPageTpl` ¤tPageTpl=`SimpleSearchPageTplActive` &includeTVs=`1` &processTVs=`1` &perPage=`4`]] </body></html>
2. Далее, нужно создать пять чанков:
Имя: Mysearchresult чанк содержит плейсхолдеры тв полей и обычных полей которые необходимо вывести.
<div class="simplesearch-result"> <h3>[[+idx]]. <a href="[[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]" title="[[+longtitle]]">[[+pagetitle]]</a></h3> <img class="img_searh" src="[[+image]]" alt="[[+pagetitle]]" style=" width: 100px; "/> <div class="extract"> <p>[[+extract]]</p> </div>Имя: search Чан формы поиска.
<form class="sisea-search-form" id="search"> <fieldset class="myfieldset-searh"> <input class="search-pol" name="[[+searchIndex]]" placeholder="Введите запрос" autocomplete="off" /> </fieldset> </form>Имя: SimpleSearchOuter Для вывода пагинации и количества результатов.
<p class="simplesearch-results">[[+resultInfo]]</p> <div class="simplesearch-paging"> <span class="simplesearch-result-pages">[[%simplesearch.result_pages? &namespace=`simplesearch` &topic=`default`]]</span>[[+paging]] </div> <div class="simplesearch-results-list"> [[+results]] </div> <div class="simplesearch-paging"> <span class="simplesearch-result-pages">[[%simplesearch.result_pages? &namespace=`simplesearch` &topic=`default`]]</span> [[+paging]] </div>Имя: SimpleSearchPageTpl Ссылки пагинации.
<span class="sisea-page"><a href="[[+link]]">[[+text]]</a>[[+separator]]</span>Имя: SimpleSearchPageTplActive Активные ссылки пагинации.
<span class="sisea-page sisea-current-page">[[+text]]</span>3. Создайте файл simplesearh.js ваш сайт/js/simplesearh.js
// SimpleSearch ajax $(document).ready(function() { // Кнопка $(".sisea-search-form").submit(function () { // раскоментировать если нужна кнопка //$("#site-search-results").load("/search-results.html",$(".sisea-search-form").serialize()).slideDown("fast"); return false; }); // Живой поиск $(".sisea-search-form input").keyup(function() { if(this.value.length > 2) { // Пользователь набирает больше 2 символов в строке поиска // скрывает/отображает с результаты за пределами окна $(document).click(function(event){ // скрываем if ($(event.target).closest(".site-search-results").length) return; $(".site-search-results").slideUp("fast"); //event.stopPropagation(); }); $('#site-search-results').append('<span id="load">LOADING...</span>'); $('#load').fadeIn('normal'); $('#search').click( function() { // отображаем $(".site-search-results").slideDown("fast"); return false; }); // ajax запрос загрузка результатов поиска от страницы и показ контейнера $("#site-search-results").load("/search.html",$(".sisea-search-form").serialize()).slideDown("fast"); } else { // Если набрано меньше 2 символов, скрыть контейнер (CSS display:none;) $("#site-search-results").slideUp("fast"); } }); });В шаблоне где будете выводить форму поиска в нижней части, перед закрывающим тегом /body
<script src="/js/simplesearh.js"></script>4. В шаблоне где хотите вывести форму поиска
<!-- Поиск simple --> [[!SimpleSearchForm? &tpl=`search`]] <div id="site-search-results" class="site-search-results"> </div>
Александр здравствуйте, пользуясь случаем, хотел бы поинтересоваться, можно ли как-то исходя из данного примера, с помощью чекбоксов, реализовать возможность выбора категорий, где осуществлять поиск?
Компонент SimpleSearch не имеет встроенной возможности фильтрации элементов. Чтобы это выполнить, всё это придётся писать самостоятельно. Во-первых, нужно будет создать сниппет для вывода этих категорий (разделов). Далее нужно будет в зависимости от выбранной категории (раздела в котором нужно искать ресурсы) возвращать его id, который затем указывать сниппету SimpleSearch в качестве значения параметра &ids.
Скрипт «simplesearh.js» скинул на Я.Диск: yadi.sk/d/msPjHmaPznVEZg
Создать чанк, название «Searh2» с содержимым:
В шаблон, там где нужно вывести вторую форму поиска:
Этот вариант работает, правда думаю что он не совсем идеальный и js код, возможно как-то можно ещё уменьшить. Но у меня получилось только так.