Пример реализации
Создаем страницу для выводов результатов поиска, внутри неё вызываем
[[!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>