Ajax поиск в Modx Revolution

Речь пойдёт о том, как в Modx Revo, сделать «живой поиск», который будет выводить результаты в отдельном окне, через ajax и без перезагрузки страницы.

Есть довольно интересное решение о котором хотел бы рассказать, рабочий демо пример, разместил тут: 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>

Александр здравствуйте, пользуясь случаем, хотел бы поинтересоваться, можно ли как-то исходя из данного примера, с помощью чекбоксов, реализовать возможность выбора категорий, где осуществлять поиск?

Александр Мальцев

20 ноября 2019, 13:29

Привет! Отличное решение для простого поиска по сайту.
Компонент SimpleSearch не имеет встроенной возможности фильтрации элементов. Чтобы это выполнить, всё это придётся писать самостоятельно. Во-первых, нужно будет создать сниппет для вывода этих категорий (разделов). Далее нужно будет в зависимости от выбранной категории (раздела в котором нужно искать ресурсы) возвращать его id, который затем указывать сниппету SimpleSearch в качестве значения параметра &ids.
1. Александр
  
  20 ноября 2019, 17:26
  
  Александр, спасибо.
  1. Денис
    
    05 февраля 2021, 10:52
    
    Добрый день! Подскажите пожалуйста, как вывести две формы с живым поиском? (для компьютерной версии одна форма, для мобильной другая). С одной проблем нет, все сделал как написано выше, все отлично работает. Но при втором вызове формы, не грузятся результаты, просто всплывает подсказка что ничего не найдено. Пробовал прописать другие классы и id для второй формы, результат тот же.
    1. Александр
      
      05 февраля 2021, 22:34
      
      Здравствуйте! Для вывода двух форм поиска на странице, как вариант можно продублировать часть кода в 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 код, возможно как-то можно ещё уменьшить. Но у меня получилось только так.
      1. Денис
        
        08 февраля 2021, 09:56
        
        Доброе утро! Все получилось, работает отлично! Спасибо)

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