MODX. Ajax поиск с помощью SimpleSearch

Оглавление

Создаем страницу для выводов результатов поиска, внутри неё вызываем

    [[!SimpleSearch]]

Далее в удобном для вас месте, например шапке или модалке вызываем форму поиска

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

Обратите внимание, что &landing = id страницы в которую мы создали для вывода результата формы

Шаблон формы search.tpl

<form class="sisea-search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
  <fieldset>
    <label for="[[+searchIndex]]"></label>
    <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" autocomplete="off" />
    <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" /> 
    <input type="submit" value="Поиск" />
  </fieldset>
</form>
<div id="site-search-results" class="site-search-results"></div>

CSS

.site-search-results { 
    display:none; 
    position:absolute; 
    text-align:left; 
    padding:15px; 
    background:#F7F7F7; 
    border-radius:5px;
    box-shadow: 2px 3px 9px -2px rgba(50, 50, 50, 0.55);
    width: 100%; 
}

JavaScript. Вместо .load("url .content" подставляем id страницы с результатами вывода и класс контейнера в котором они находятся

<script>
    $(document).ready(function() {
        /*Submit btn*/
    	/*$(".sisea-search-form").submit(function () {
    	    $("#site-search-results").load("[[++site_url]][[~13]] .search-content",$(".sisea-search-form").serialize()).slideDown("fast");
            return false;
    	});*/
    	// Ajax поиск
    	$(".sisea-search-form input").keyup(function() {
    		if(this.value.length > 2) {
    			// скрывает/отображает с результаты за пределами окна
    			$(document).click(function(event){ // скрываем
    				if ($(event.target).closest(".site-search-results").length) return;
    				$(".site-search-results").slideUp("fast");
    			});
    			$('#search').click( function() { // отображаем
    				$(".site-search-results").slideDown("fast");
    				return false;
    			});	
    			// ajax запрос загрузка результатов поиска от страницы и показ контейнера
    			$("#site-search-results").load("[[++site_url]][[~13]] .search-content",$(".sisea-search-form").serialize()).slideDown("fast");
    		}
    		else {
    		    // Если набрано меньше 2 символов, скрыть контейнер (CSS display:none;)
    			$("#site-search-results").slideUp("fast"); 
    		}
    	});
    });
</script>