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

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

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

Далее делаем вызов сниппета SimpleSearch:

[[!SimpleSearchForm? 
&tpl=`simpleSearchFormDemo.tpl`]]

Создаём чанк simpleSearchFormDemo.tpl

Для работы typehead-bootstrap.js в этот код чанка нужно добавить параметры через данные атрибутов - связывайте через тире имена параметров с data-, например так data-source="":

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

Добавим значения в чанк simpleSearchFormDemo.tpl для вывода всплывающих подсказок в строке поиска:

Таким образом при вводе в строке поиска буквы "h" у нас сработает скрипт typehead-bootstrap.js и выведет максимум 4 подсказки (data-items="4") это будут подсказки hint1-hint4. Заменим данные подсказки на смысловые значения. Создадим сниппет, который будет выводить названия статей блога с названием getPagetitles:

Вставим вызов сниппета вместо "hint1"..."hint5", и отключим автозаполнение форм браузерачерез атрибут autocomplete="off". Окончательный вид чанка simpleSearchFormDemo.tpl:

Демо Форма поиска на сайте

Другие полезные статьи: