Содержание:
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>
Александр здравствуйте, пользуясь случаем, хотел бы поинтересоваться, можно ли как-то исходя из данного примера, с помощью чекбоксов, реализовать возможность выбора категорий, где осуществлять поиск?
- Александр2019-11-20 17:26:51Александр, спасибо.
Денис2021-02-05 10:52:00Добрый день! Подскажите пожалуйста, как вывести две формы с живым поиском? (для компьютерной версии одна форма, для мобильной другая). С одной проблем нет, все сделал как написано выше, все отлично работает. Но при втором вызове формы, не грузятся результаты, просто всплывает подсказка что ничего не найдено. Пробовал прописать другие классы и id для второй формы, результат тот же.- Александр2021-02-05 22:34:33Здравствуйте! Для вывода двух форм поиска на странице, как вариант можно продублировать часть кода в js и изменить классы, id и добавить чанк.
Скрипт «simplesearh.js» скинул на Я.Диск: yadi.sk/d/msPjHmaPznVEZg
Создать чанк, название «Searh2» с содержимым:
<form class="sisea-search-form2" id="search2"> <fieldset class="myfieldset-searh"> <input type="text" class="search-pol" name="[[+searchIndex]]" placeholder="Введите поисковый запрос. Например" autocomplete="off"/> </fieldset> </form>
В шаблон, там где нужно вывести вторую форму поиска:
[[!SimpleSearchForm? &tpl=`search2`]] <div id="site-search-results2" class="site-search-results2"> </div>
Этот вариант работает, правда думаю что он не совсем идеальный и js код, возможно как-то можно ещё уменьшить. Но у меня получилось только так. - Денис2021-02-08 09:56:22Доброе утро! Все получилось, работает отлично! Спасибо)
Комментарии: 6
Компонент SimpleSearch не имеет встроенной возможности фильтрации элементов. Чтобы это выполнить, всё это придётся писать самостоятельно. Во-первых, нужно будет создать сниппет для вывода этих категорий (разделов). Далее нужно будет в зависимости от выбранной категории (раздела в котором нужно искать ресурсы) возвращать его id, который затем указывать сниппету SimpleSearch в качестве значения параметра &ids.