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

  • Дополнение 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:

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

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

    - [Урок 7. Сниппеты]([[~25]])
    - [Создание пользовательского сниппета]([[~74]])
    - [MODX Revolution объекты]([[~121]])
    - [Урок 25. Создание AJAX поиска на сайте]([[~164]])