Урок 19. Создание формы поиска с выпадающими подсказками
В этом уроке рассмотрим как можно быстро создать удобную форму поиска. Для этого нам понадобиться:
- Дополнение SimpleSearch берём из репозитория и/или устанавливаем как обычно через Управление дополениями менеджера.
- Проделываем то же самое с Bootstrap темой, в комплект с которой входит скрипт typehead-bootstrap.js. Его мы и будем использовать для создания удобного поиска. Либо прописываем в шапке сайта пути к необходимым скриптам и стилям. В моём случае:
Далее делаем вызов сниппета SimpleSearch:
[[!SimpleSearchForm? &tpl=`simpleSearchFormDemo.tpl`]]
Создаём чанк simpleSearchFormDemo.tpl
Для работы typehead-bootstrap.js в этот код чанка нужно добавить параметры через данные атрибутов - связывайте через тире имена параметров с data-, например так data-source="":
Добавим значения в чанк simpleSearchFormDemo.tpl для вывода всплывающих подсказок в строке поиска:
Таким образом при вводе в строке поиска буквы "h" у нас сработает скрипт typehead-bootstrap.js и выведет максимум 4 подсказки (data-items="4") это будут подсказки hint1-hint4. Заменим данные подсказки на смысловые значения. Создадим сниппет, который будет выводить названия статей блога с названием getPagetitles:
Вставим вызов сниппета вместо "hint1"..."hint5", и отключим автозаполнение форм браузерачерез атрибут autocomplete="off". Окончательный вид чанка simpleSearchFormDemo.tpl:
Другие полезные статьи:
Guy Fawkes
02.10.2012 13:55&parents=`8,9` 2 параметр не принимается. только первый "8" и порекомендовал пресмотреться к реализации поиска на лету как CMS DLE http://demo.dle-news.ru/
Viktor Minator
02.10.2012 14:48Спасибо. Поправил сниппет. По поводу "поиска как в DLE" - soon.
Guy Fawkes
02.10.2012 15:47Я просто сам пытаюсь сделать поиск на лету но увы, что то как то идей нет, и кстати Виктор куда можно написать топик на AJAX прогрузку новостей, допустим как в Вконтате и т.д. реализация на MODx
Bhakti Lata
02.10.2012 21:17Виктор! Чтобы не было скучно жить поставь поиск на сайт :) Поставила и вместо букв выводит вопросики в черных ромбиках. У вас такого не случалось?
Viktor Minator
02.10.2012 21:18Случалось, я делал доунгрейд до предыдущей версии SimpleSearch
ascension
04.10.2012 09:01Спасибо, Виктор! Помогло, правда в версии SimpleSearch 1.5.1 настолько глупый поиск, что все равно, что его и нет. Будем ждать лучших времен?
Viktor Minator
05.10.2012 02:36Используйте mSearch
Denys Butenko
13.10.2012 13:39Спасибо, полезный урок. Только использую для поиска mSearch.
Дмитрий
21.10.2012 19:00У меня не Bootstrap, а скачивать её специально не хочется, не могли бы Вы выложить файл typehead-bootstrap.js ? Спасибо!
Viktor Minator
21.10.2012 19:36https://modx.ws/assets/js/bootstrap-typeahead.js
Александр
17.11.2012 19:35я прикрутил скрипты, сделал сниппет, сделал чанк, все как тут описано, но при вызовове [[!SimpleSearchForm? &tpl=`simpleSearchFormDemo.tpl`]] поля поиска не появляется, если вызываю так [[!SimpleSearchForm? &tpl=`simpleSearchFormDemo`]] то поле появляется но поиск не работает, может еще что нужно сделать?
Павел
25.07.2013 02:53Скажите пожалуйста а как прикрутить к подсказкам TV и не по одному а по двум к примеру TV
ван микоряк
12.05.2014 17:53сделал все как тут выводит только первую букву
например пишу в поиск "а"
внизу 4 строки
а
а
а
а