Просмотр исходного текста страницы Поиск с панелью предложений

 [[category:Вопросы и уроки разработки сайтов на UMI.CMS]]

'''Задача''':
<p>
Реализовать автодополнение при наборе текста в текстовых полях.
</p>
'''Решение''':
<p>
Одно из решений для реализации данной возможности - применение плагина [http://jqueryui.com/demos/autocomplete/ jQuery UI Autocomplete] (client side) и использование кастомного макроса, который будет "вытаскивать" массив проиндексированных слов (server side).
</p>
<p>
Поскольку Autocomplete уже входит в состав UMI.CMS (файл "/js/jquery/jquery-ui.js"), нам остаётся только описать стиль для данного виджета.
<table align="center" width="100%">
<tr>
<td style="border: 1px dotted black; padding: 20px;">
'''Совет'''.
<br />
<p>
Удобнее всего скачать уже готовый стиль (тему) с официального сайта jQuery UI по ссылке: [http://jqueryui.com/download http://jqueryui.com/download]. Нас интересует только Autocomplete, поэтому можно убрать все флажки кроме "Autocomplete" в разделе "Widgets". Из скачанного архива нам понадобится только файл вида "jquery-ui-[версия].custom.css" в папке "/css/[название_темы]/" (по-умолчанию используется тема "ui-lightness"). Его необходимо скопировать в папку "/css". В дальнейшем в данном файле можно подредактировать стиль вручную (настроить шрифт, цвет, добавить скроллбар для выпадающего списка и т.д.).
</p>
</td>
</tr>
</table>
</p>
<p>
Пишем кастомный макрос, который будет возвращать массив проиндексированных слов из базы данных (подробнее про написание кастомных макросов Вы можете прочитать в [http://api.umi-cms.ru/ документации]):
</p>
<source lang="php">
public function wordsArray() {

    $pool = ConnectionPool::getInstance();
    $pool->addConnection("core", "localhost", "umi", "umi", "umi");
    $pool->init();

    $connection = $pool->getConnection("core");
    $sql = "SELECT word FROM cms3_search_index_words";
    $query = $connection->query($sql, true);

    for($i = 0, $numrows = mysql_num_rows($query); $i < $numrows; $i++) {
        $row = mysql_fetch_assoc($query);
	$words[$i] = strval($row["word"]);
    }

    $result = json_encode($words);
    return $result;
}
</source>
<p>
Текст макроса размещаем в файле "/classes/modules/search/__custom.php", сразу после строчки "//TODO: Write your macroses here". Также нужно задать разрешения для макроса. Создаём в той же папке файл "permissions.custom.php" и в нём настраиваем разрешения:
<source lang="php">
$permissions = Array(
    'search' => Array('wordsArray')
);
</source>
</p>
<p>
Для подключения плагина и стиля необходимо написать следующий код в '''основном''' шаблоне:
<source lang="html4strict">
<link href="/css/jquery-ui-1.8.20.custom.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#search').autocomplete({ source: %search wordsArray()% });
    });
</script>
</source>
</p>
<p>
В данном случае мы подключаем Autocomplete для текстового поля с идентификатором "search". Можно подключать Autocomplete к конкретным полям через их идентификатор, либо воспользоваться специальным классом для таких полей:
<source lang="html4strict">
<script type="text/javascript">
    $(document).ready(function() {
        $('.autocomplete').autocomplete({ source: %search wordsArray()% });
    });
</script>
</source>  
</p>
<p>
Подключаем Autocomplete для всех полей с классом "autocomplete".
</p>
<p>
Про настройки для Autocomplete можно прочитать в [http://jqueryui.com/demos/autocomplete/ официальной документации] виджета (вкладка "Options").
</p>
<table align="center" width="100%">
<tr>
<td style="border: 1px dotted black; padding: 20px;">
'''Важно'''.
<br />
<p>
Для сайтов с большим количеством контента необходимо применять опцию "minLength". Она позволяет настроить минимальное число символов для активации Autocomplete. Иначе скрипт может "подвисать" на достаточно большое время.
</p>
<p>
В данной статье механизм тестировался на сайте с числом уникальных проиндексированных слов ~50000 и параметром "minLength" равным 3. 
</p>
</td>
</tr>
</table>
<source lang="html4strict">
<script type="text/javascript">
    $(document).ready(function() {
        $('.autocomplete').autocomplete({ 
            source: %search wordsArray()%,
            minLength: 3 
        });
    });
</script>
</source>
<p>
Пример использования параметра "minLength".
</p>
<p>
Также хорошо бы добавить скроллбар для виджета, так как количество элементов может быть довольно большим. Для этого нам нужно подправить стиль "ui-autocomplete" в файле "jquery-ui-[версия].custom.css" (либо в Вашем собственном файле стилей):
<source lang="css">
.ui-autocomplete {
    position: absolute;
    cursor: default;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}
</source>
</p>
<p>
Ограничиваем максимальную высоту виджета в 250 пикселей, скрываем горизонтальный скроллбар и настраиваем отображение вертикального скроллбара по необходимости.
</p>
<br />
<table align="center">
<tr>
<td style="border: 1px solid black; padding: 5px;">
[[Файл:autocomplete.png]]
</td>
</tr>
<tr>
<td style="font-color: darkblue; font-weight: bold; text-align: center;">
Пример работы Autocomplete
</td>
</tr>
</table>