MODX Evolution и AJAX: реализация поиска на лету через обращение к ресурсу

MODX очень гибкая система, и часто реализация поставленной задачи возможна несколькими принципиально разными методами. В этой статье я рассмотрю решение для AJAX-поиска через передачу GET параметра ресурсу.

Этот метод также вполне подойдет для получения любой информации на вашем сайте посредством AJAX.

MODX Evolution и AJAX: реализация поиска на лету через обращение к ресурсу

В базовом составе MODX есть сниппет AjaxSearch, но нам он не подойдет. В качестве более чем достойной замены можно использовать evoSearch.

Для реализации AJAX поиска, на базе сниппета evoSearch для MODX Evolution, нам понадобится:

Установленный сниппет evoSearch.

Чанки:

{{search-out}} - шаблон выдачи (вызывается в ресурсе, в который происходит передача параметра)

[!if? &is=`[+search_total+]:!empty` &then=`<div class="results-counter">Результаты поиска: <b>[+search_total+]</b></div>`!]
[!evoSearch? &id=`search` &worker=`Ditto` &tpl=`search-results` &extract_with_tv=`1` &show_stat=`1` &statTpl=`search-stat` &noResults=`<p class="noresult">Нет результатов для отображения...</p>` &paginate=`1` &display=`7` &rel=`1` !]
[!if? &is=`[+search_currentPage+]:!empty` &then=`<div class="paging">
[+search_previous+]
[+search_next+]
[+search_pages+]
<span class="pager-results">Страницы:&nbsp;[+search_currentPage+]&nbsp;из&nbsp;[+search_totalPages+]</span>
</div>`!]

{{search-results}} - шаблон элемента в выдаче

<div class="search-result-item">
<div class="search_extract">
<h3><a href="[+url+]">[+pagetitle+]</a></h3>
<p>[+introtext+]</p>
</div>
<p><a href="[+url+]" class="button go-to-result">Перейти к результату&nbsp;&nbsp;&#9658;</a></p>
</div>

{{search-form-out}} - форма поиска и JS-код обработчика

<div id="search-out">
<form action="[~[+id+]~]" method="GET" id="search-form">
<input type="text" placeholder="Поиск по статьям..." value="" name="search" id="search" />
</form>
</div>
<div id="flysearch-placeholder">
<div class="search-results"><p class="noresult">Ждем входящих данных...</p></div>
</div>
[[include? &src=`/frontend/js/assets/textchange.min.js` &type=`js-head`]]
[[include? &src=`
<script type="text/javascript">
$(function () {
$(document).on("submit", "#search-form", function(e) {
e.preventDefault();
});
$("input#search").bind("textchange",function() {
var searchstring = $(this).val();
$.ajax({
beforeSend: function() {
$("#flysearch-placeholder").addClass("loading");
},
url: "[(site_url)][~[+id+]~]",
type: "GET",
dataType: "html",
data: {
search: searchstring
},
success: function(data) {
$("#flysearch-placeholder").removeClass("loading");
data = $.parseHTML(data);
$("#flysearch-placeholder .search-results").html(data);
}
});
});
});
</script>
`]]

Далее создаем новый ресурс в дереве документов с любым именем и псевдонимом. На вкладке Настройка страницы устанавливаем параметры, как показано на изображении:

Выбираем шаблон (blank), а в тело документа (поле Содержимое) вставляем вызов чанка {{search-out}}

Вывод формы поиска:

В месте, где необходимо вызвать форму поиска в шаблоне вызываем чанк с параметромв котором указываем ID созданного ресурса:

{{search-form-out? &id=`99`}}

В качестве бонуса:

Для подключения скриптов, стилей и просто вывода блоков на нужной странице я использую сниппет [[include]]:

<?php
/* [[include? &type=`js` &src=`/frontend/js/ui.js`]] */
$type = (isset($type)) ? $type : "js-head";
$src = (isset($src)) ? $src : null;
if ($src) {
if ($modx->getChunk($src)) {
$src = $modx->getChunk($src);
} else {
$src = trim($src);
}
switch ($type) {
case 'html':
$modx->regClientHTMLBlock($src);
break;
case 'html-head':
$modx->regClientStartupHTMLBlock($src);
break;
case 'js':
$modx->regClientScript($src);
break;
case 'js-head':
$modx->regClientStartupScript($src);
break;
case 'css':
$modx->regClientCSS($src);
break;
}
}
return;
?>

Пример работы решения на этом сайте

×
Предложите тему или интересную задачу для следующей статьи:
×

Ждем входящих данных...