MODX. Поиск на сайте. Компонент SimpleSearch

Отредактировано: 06 Февраля 2023

Простейший поиск

Простейший путь для реализации поиска на сайте на cmf MODX реализуется через дополнение SimpleSearch. Для этого надо:

1. Установить дополнение SimpleSearch;
2. Создать новый ресурс, страницу на которой будет отображаться результат поиска:
   • Имя: Результаты поиска;
   • Псевдоним: search;
   • Галки: «не показывать в меню» и «Оубликован»;
   • Убрать галки: «Доступен для поиска», «Кешируемый»;
   • В поле содержимого вставляем 

   [[!SimpleSearch]]

   Запомните ID созданного ресурса — он нам еще понадобится.

   • В шаблон, на место где должен находиться поиск вставляем следующий код:

     [[!SimpleSearchForm? &landing=`1` &tpl=`tpl.search`]]

     • &landing: ID созданной страницы;
     • &tpl: шаблон формы поиска.

3. Создаем чанк tpl.search. Код можно использовать такой:

   
   <form class="search" action="[[~[[+landing]]]]" method="[[+method]]"  > 
       <fieldset>   
           <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" />   
           <input type="hidden" name="id" value="[[+landing]]" />
           <input type="submit" value="[[[[%sisea.search? &namespace=`sisea` &topic=`default`]]]]" /> 
       </fieldset>
   </form>
   

 Теперь поиск должен появиться на сайте.

Ajax поиск

В шаблоне, там где должен появляться результат поиска, пишем:

<div id="search-ajax-results-wrap" class="search-ajax-results-wrap"></div>

Создаем новую страницу, для вычисления результатов поиска. На ней размещаем вызов сниппета SimpleSearch в обертке:

<div class="search-ajax-results">
     [[!SimpleSearch]]
</div>

Добавляем скрипт:

// Кнопка 
    	$(".search").submit(function () {
            // раскоментировать если нужна кнопка
            //$("#search-ajax-results-wrap").load("/tools/search-results-ajax/ .search-ajax-results",$(".search").serialize()).slideDown("fast"); 
            return false;
    	});
    	// Живой поиск
    	$(".search input").keyup(function() {
    		if(this.value.length > 2) { // Пользователь набирает больше 2 символов в строке поиска
    			// скрывает/отображает с результаты за пределами окна
    			$(document).click(function(event){ // скрываем
    				if ($(event.target).closest(".search-ajax-results-wrap").length) return;
    				$(".search-ajax-results-wrap").slideUp("fast");
    				//event.stopPropagation();
    			});
    			$('.search').click( function() { // отображаем
    				$(".search-ajax-results-wrap").slideDown("fast");
    				return false;
    			});	
    			// ajax запрос загрузка результатов поиска от страницы и показ контейнера
    			$("#search-ajax-results-wrap").load("/tools/search-results-ajax/ .search-ajax-results",$(".sisea-search-form").serialize()).slideDown("fast");
    		}
    		else {
    		    // Если набрано меньше 2 символов, скрыть контейнер (CSS display:none;)
    			$("#search-ajax-results-wrap").slideUp("fast"); 
    		}
    	});

P.S. Поиск в компоненте SimpleSearch привязан к классу .sisea-search-form. Если хотите изменить класс в скрипте, придется перенастраивать компонент.

Документация

Компонент состоит из 2 сниппетов:

• SimpleSearchForm — отображает форму поиска;
• SimpleSearch — отображает результаты поиска, основываясь на отправленных поисковых результатах.

Параметры SimpleSearchForm

Шаблоны SimpleSearchForm

&tpl — шаблон формы поиска.

<form class="sisea-search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]"><font></font>
  <fieldset><font></font>
    <label for="[[+searchIndex]]">[[%sisea.search? &namespace=`sisea` &topic=`default`]]</label><font></font>
    <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" /><font></font>
    <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" /> <font></font>
    <input type="submit" value="[[%sisea.search? &namespace=`sisea` &topic=`default`]]" /><font></font>
  </fieldset><font></font>
</form><font></font>

Параметры SimpleSearch

Шаблоны SimpleSearch

&tpl — шаблон результатов поиска.

<div class="sisea-result">
    <h3>[[+idx]]. <a href="[[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]" title="[[+longtitle]]">[[+pagetitle]]</a></h3>
    <div class="extract"><p>[[+extract]]</p></div>
</div>

&containerTpl — шаблон обертки.

<p class="sisea-results">[[+resultInfo]]</p>
 
<div class="sisea-paging"><span class="sisea-result-pages">[[%sisea.result_pages? &namespace=`sisea` &topic=`default`]]</span>[[+paging]]</div>
 
<div class="sisea-results-list">
    [[+results]]
</div>
 
<div class="sisea-paging"><span class="sisea-result-pages">[[%sisea.result_pages? &namespace=`sisea` &topic=`default`]]</span>[[+paging]]</div>

&pageTpl — шаблон простых, неактивных, кликабельных ссылок пагинации.

<span class="sisea-page"><a href="[[+link]]">[[+text]]</a>[[+separator]]</span>

&currentPageTpl — шаблон простых, активных, некликабельных ссылок пагинации.

<span class="sisea-page sisea-current-page">[[+text]]</span>