Форма поиска с выпадающими подсказками в MODX Revolution

В этом уроке рассмотрим как можно быстро создать удобную форму поиска. Для этого нам понадобиться:

• Дополнение SimpleSearch берём из репозитория и/или устанавливаем как обычно через Управление дополениями менеджера.
• Проделываем то же самое с Bootstrap темой, в комплект с которой входит скрипт typehead-bootstrap.js. Его мы и будем использовать для создания удобного поиска. Либо прописываем в шапке сайта пути к необходимым скриптам и стилям. В моём случае:

<link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <!--[if lt IE 7]><link rel="stylesheet" href="/assets/css/bootstrap-ie6.min.css"><![endif]--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="/assets/js/bootstrap.min.js"></script> <script src="/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>

Вот и все!