SimpleSearch ajax поиск в modx revo

SimpleSearch - это стандартный пакет, поиск по сайту в modx revolution. К нему мы добавим ajax запрос для живого поиска. Пример можно посмотреть на этом же сайте, работает довольно просто и, заметьте, с пагинацией. Снипет SimpleSearchForm (форма поиска) запрашивает ajax запросом у отдельной страницы с результатами, который выводит снипет SimpleSearch.

1 Скачиваем популярный пакет поиск по сайту SimpleSearch из репозитория modx revo и устанавливаем его.
Создаем ресурс с пустым шаблоном для того что бы ajax забирал данные и отправлял при запросах в форме поиска.
Псевданим к примеру назовем «search-results» к нему будет обращаться ajax.
Содержимое ресурса:


<!DOCTYPE HTML>
<html><head>
    <meta charset="[[++modx_charset]]" />
    <meta name="robots" content="none" />
    <title>search results</title>
    <script type="text/javascript">
        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]]
</body></html>

2 Теперь разместим форму поиска в удобном для Вас месте, за это отвечает снипет «SimpleSearchForm».
Как правило форму поиска пихают в шаблоны modx.
Div элемент выводит результаты ajax запроса.


[[!SimpleSearchForm]]
<div id="site-search-results" class="site-search-results"> </div>

3 Подключим ajax для отправки запросов из формы на созданую нами стриницу в пункте 1.
( ! ) Не забываем подключить jquery
( ! ) Убедитесь по какому адресу ajax обращается к ресурсу. За это отвечает метод load() в 2-х местах.


    // SimpleSearch ajax
    $(document).ready(function() {
        // Кнопка 
    	$(".sisea-search-form").submit(function () {
            // раскоментировать если нужна кнопка
            // $("#site-search-results").load("/search-results/",$(".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();
    			});
    			$('#search').click( function() { // отображаем
    				$(".site-search-results").slideDown("fast");
    				return false;
    			});	
    			// ajax запрос загрузка результатов поиска от страницы и показ контейнера
    			$("#site-search-results").load("/search-results/",$(".sisea-search-form").serialize()).slideDown("fast");
    		}
    		else {
    		    // Если набрано меньше 2 символов, скрыть контейнер (CSS display:none;)
    			$("#site-search-results").slideUp("fast"); 
    		}
    	});
    });

4 Подключаем css для отображения реузьтатов ajax эффекта скрытия и раскрытия окна и его необходимые стили отображения, все по минимуму. Остальные стили допилите сами как описанное в мануале пакета SimpleSearch в modx revolution.

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

Кнопку поиска в снипете SimpleSearchForm можно вообще убрать
так как ajax и так перехватывает нажатие кнопки Enter.

Плагин для подсветки кода на сайте modx