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.