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

Тема в разделе "MODx", создана пользователем CyberWarring, 8 окт 2012.

  1. CyberWarring

    CyberWarring

    Регистрация:
    8 окт 2012
    Сообщения:
    15
    Симпатии:
    7
    • Дополнение SimpleSearch берём из репозитория и/или устанавливаем как обычно через Управление дополениями менеджера.
    • Проделываем то же самое с Bootstrap темой, в комплект с которой входит скрипт typehead-bootstrap.js. Его мы и будем использовать для создания удобного поиска. Либо прописываем в шапке сайта пути к необходимым скриптам и стилям. В моём случае
    Код:
    <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
    <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
    <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>