Создание формы поиска с выпадающими подсказками

CyberWarring · 8 окт 2012

Дополнение SimpleSearch берём из репозитория и/или устанавливаем как обычно через Управление дополениями менеджера.

Проделываем то же самое с Bootstrap темой, в комплект с которой входит скрипт typehead-bootstrap.js. Его мы и будем использовать для создания удобного поиска. Либо прописываем в шапке сайта пути к необходимым скриптам и стилям. В моём случае
Код:
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://modx.ws/assets/js/bootstrap-typeahead.js"></script>
Далее делаем вызов сниппета SimpleSearch:
Код:
[[!SimpleSearchForm?
&tpl=`simpleSearchFormDemo.tpl`]]
Создаём чанк simpleSearchFormDemo.tpl
Код:
<form id="search-global-form" class="form-search" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
        <input type="text" class="input-large search-query" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]"/>
        <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
        <button type="submit" class="btn" value="">Поиск</button>
</form>
Для работы typehead-bootstrap.js в этот код чанка нужно добавить параметры через данные атрибутов - связывайте через тире имена параметров с data-, например так data-source="":

Это можно сделать через Javascript или через HTML, я буду использовать HTML

Возможные значения атрибутов для typeahead можно найти в документации по Bootstrap.

Добавим значения в чанк simpleSearchFormDemo.tpl для вывода всплывающих подсказок в строке поиска:
Код:
<form id="search-global-form" class="form-search" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
        <input type="text" class="input-large search-query" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" data-provide="typeahead" data-items="4" data-source='["hint1","hint2","hint3","hint4","hint5"]'/>
        <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
        <button type="submit" class="btn" value="">Поиск</button>
</form>
Таким образом при вводе в строке поиска буквы "h" у нас сработает скрипт typehead-bootstrap.js и выведет максимум 4 подсказки (data-items="4") это будут подсказки hint1-hint4. Заменим данные подсказки на смысловые значения. Создадим сниппет, который будет выводить названия статей блога с названием getPagetitles:
Код:
<?
/* getPagetitles snippet
use: [[getPagetitles? &parents=`parentsIDs`]] */
if (!$parents) return;
$res = $modx->getCollection('modResource',array('parent:IN' => explode(',', $parents)));
$output = '';
foreach ($res as $v) {
        $output.= '"'.$v->get('pagetitle').'",';
};
$output = substr($output,0,-1);
return $output;
\
Вставим вызов сниппета вместо "hint1"..."hint5", и отключим автозаполнение форм браузерачерез атрибутautocomplete="off". Окончательный вид чанка simpleSearchFormDemo.tpl:
Код:
<form id="search-global-form" class="form-search" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
 
        <input type="text" class="input-big search-query" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" autocomplete="off" data-provide="typeahead"
        data-items="4" data-source='[ [[getPagetitles? &parents=`8,9`]] ]'/>
        <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
        <button type="submit" class="btn" value="">Поиск</button>
 
</form>

Создание формы поиска с выпадающими подсказками

CyberWarring