Интернет технологии постоянно совершенствуются, меняются, дополняются. Сегодня уже невозможно представить поисковик, в котором бы не было автодополнения: мы вводим текст, а сайт сам пытается предугадать, что мы будем искать.
Данная технология уже стала популярной и в социальных сетях, пользовательских блогах и т.д.
В данной статье мы познакомимся украдкой с одним из плагинов для 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 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.
1. DEFAULT @ 30 апр 2010 г. в 17:44