Автодополнение для jQuery

Интернет технологии постоянно совершенствуются, меняются, дополняются. Сегодня уже невозможно представить поисковик, в котором бы не было автодополнения: мы вводим текст, а сайт сам пытается предугадать, что мы будем искать.

Данная технология уже стала популярной и в социальных сетях, пользовательских блогах и т.д.

В данной статье мы познакомимся украдкой с одним из плагинов для jQuery позволяющим нам сделать автодополнение на вашем сайте.

Для начала скачаем плагин.

В архив включены различные примеры использования. А так же CSS файл. Для работы надо подключить jquery, сам плагин и файл со стилями. Стиль настраиваем на цвет и вкус.

Использование

autocomplete (url or data, options)

Все просто — вставляем ссылку или JS массив и пишем опции. Ссылка в простейшем варианте должна возвращать простой текстовый файл, в котором каждая из опций разделена символом “\n”. Возможно использование Json.

Приступим к краткому разбору наиболее частных опций.

• delay — задержка, выражается в миллисекундах. Для удаленного URL равна по умолчанию 400, для локального массива 100. Это надо для того, чтобы когда пользователь набирает текст, наш автокомплит не путался у него под ногами, не мозолил своим быстрым появлением, или наоборот — пользователю не приходилось долго ждать. А для url этот параметр сокращает количество обращений к сайту, базе и т.д.
• matchCase — чувствителен ли набор к регистру, нужно только для массива.
• matchContains — еще одна очень полезная опция, которая означает “содержит”, а не только “начинается с”, применимо для локального массива. Ни один из аналогов данного плагина не содержит подобной опции на сегодняшний день.
• minChars — минимальное количество символов для отображения автодополнения. Опция нужна для URL. Позволит рационально снизить нагрузку на сервер.
• multiple — еще одна довольно нужная и довольно редкая для аналогов опция, позволяет выбор элементов сделать множественным, то есть в один input могут быть введены несколько опций, разделенные multipleSeparator (по умолчанию “,”)

Пример работы данного автокомплита: демо

Описание всех опций и возможностей: справка

Решаем проблему кодировок

Неужели все так просто и легко? Практически да. Но автор этого платина использует только английскую раскладку клавиатуры. С русскими кодировками, как и со многими другими дела обстоят более прозаично. Плагин при работе с удаленными файлами неправильно передает текст. Суть ошибки состоит в том, что GET не позволяет передавать русские символы. Но не переживайте: легким и изящным решением руки мы это исправим.

Отрываем файл jquery.autocomplete.js, находим в нем

data: $.extend({
	q: lastWord(term),
	limit: options.max
}, extraParams),

Заменяем на:

data: $.extend({
	q: encodeURIComponent(lastWord(term)),
	limit: options.max
}, extraParams),

Этим мы «закодировали» строку

А на стороне сервера эту строку надо раскодировать.

$q = strtolower($_GET[‘q’]);
$q = urldecode($q); 

Теперь все работает как надо! Приятной работы и качественных сайтов!

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.