Ajax поиск в Modx Revolution

Речь пойдёт о том, как в Modx Revo, сделать "живой поиск", который будет выводить результаты в отдельном окне, через ajax и без перезагрузки страницы. Есть довольно интересное решение о котором хотел бы рассказать, рабочий демо пример, разместил тут: _http://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"&g;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>
Александр здравствуйте, пользуясь случаем, хотел бы поинтересоваться, можно ли как-то исходя из данного примера, с помощью чекбоксов, реализовать возможность выбора категорий, где осуществлять поиск?

Комментарии: 6

andrianov
andrianov
Добрый день. Сделал всё по инструкции, но при вводе каждого символа инкрементится LOADING..., и get запрос возвращает 404 ошибку. В общем то не выводятся результаты поиска или сам поиск не работает. Может быть есть догадки что не работает?
Александр Мальцев
Александр Мальцев
Привет! Отличное решение для простого поиска по сайту.
Компонент SimpleSearch не имеет встроенной возможности фильтрации элементов. Чтобы это выполнить, всё это придётся писать самостоятельно. Во-первых, нужно будет создать сниппет для вывода этих категорий (разделов). Далее нужно будет в зависимости от выбранной категории (раздела в котором нужно искать ресурсы) возвращать его id, который затем указывать сниппету SimpleSearch в качестве значения параметра &ids.
Александр
Александр
Александр, спасибо.
Денис
Денис
Добрый день! Подскажите пожалуйста, как вывести две формы с живым поиском? (для компьютерной версии одна форма, для мобильной другая). С одной проблем нет, все сделал как написано выше, все отлично работает. Но при втором вызове формы, не грузятся результаты, просто всплывает подсказка что ничего не найдено. Пробовал прописать другие классы и id для второй формы, результат тот же.
Александр
Александр
Здравствуйте! Для вывода двух форм поиска на странице, как вариант можно продублировать часть кода в 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 код, возможно как-то можно ещё уменьшить. Но у меня получилось только так.
Денис
Денис
Доброе утро! Все получилось, работает отлично! Спасибо)