Ajax поиск в Modx Revolution

Александр
Александр
2,1K
5
Содержание:
  1. Комментарии
Речь пойдёт о том, как в 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>

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

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

  1. Александр Мальцев
    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
            Доброе утро! Все получилось, работает отлично! Спасибо)
    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.