jQuery AutoComplete
Хочу представить вашему вниманию очередной плагин для jQuery, на этот раз автозаполнение со своим преферансом.
Описание
Первое достоинство плагина — это производительность. Все результаты запросов кэшируются, и в следующий раз подбираются из кэша, а не с сервера.
Кроме того, у него есть несколько уникальных функций, такие как использование разделителей, поиск по нескольким словам, возможность использовать компонент автономно, без отправки запроса на сервер.
Работает в IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, Chrome 1.0+
Установка
Процедура установки достаточно обыденна: просто подключите js-файл после jQuery.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
* This source code was highlighted with Source Code Highlighter.Использование
Добавим автозаполнение к стандартному input’у:
<input type="text" name="q" id="query" />
* This source code was highlighted with Source Code Highlighter.Далее инициализируется объект автозаполнения, убедитесь, что это происходит после загрузки DOM-модели, иначе могут быть глюки с IE.
$('#query').autocomplete({
serviceUrl: 'service/autocomplete.ashx', // Страница для обработки запросов автозаполнения
minChars: 2, // Минимальная длина запроса для срабатывания автозаполнения
delimiter: /(,|;)\s*/, // Разделитель для нескольких запросов, символ или регулярное выражение
maxHeight: 400, // Максимальная высота списка подсказок, в пикселях
width: 300, // Ширина списка
zIndex: 9999, // z-index списка
deferRequestBy: 0, // Задержка запроса (мсек), на случай, если мы не хотим слать миллион запросов, пока пользователь печатает. Я обычно ставлю 300.
params: { country: 'Yes'}, // Дополнительные параметры
onSelect: function(data, value){ }, // Callback функция, срабатывающая на выбор одного из предложенных вариантов,
lookup: ['January', 'February', 'March'] // Список вариантов для локального автозаполнения
});
* This source code was highlighted with Source Code Highlighter.Страница, указанная в serviceUrl получает GET запрос, а в качестве ответа должна отправить данные в формате JSON:
{
query:'Li', // Оригинальный запрос
suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // Список подсказок
data:['LR','LY','LI','LT'] // Необязательный параметр, список ключей вариантов подсказок. Используется в callback функции
}
* This source code was highlighted with Source Code Highlighter.Включить/выключить автозаполнение, а также заново инициализировать параметры можно в любой момент, через функции объекта:
var ac = $('#query').autocomplete({ /*параметры*/ });
ac.disable();
ac.enable();
ac.setOptons({ zIndex: 1001 });
* This source code was highlighted with Source Code Highlighter.Стилизация
Скрип создаёт следующий фрагмент разметки:
<div class="autocomplete-w1">
<div style="width:299px;" id="Autocomplete_1240430421731" class="autocomplete">
<div><strong>Li</strong>beria</div>
<div><strong>Li</strong>byan Arab Jamahiriya</div>
<div><strong>Li</strong>echtenstein</div>
<div class="selected"><strong>Li</strong>thuania</div>
</div>
</div>
* This source code was highlighted with Source Code Highlighter.Вот пример CSS стилей:
.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }
* This source code was highlighted with Source Code Highlighter.Ссылки
Описание: www.devbridge.com/projects/autocomplete/jquery/
Скачать плагин можно здесь: www.devbridge.com/projects/autocomplete/jquery/#download
Версия для Js Prototype: www.devbridge.com/projects/autocomplete/#download
UPD
Аналогичные решения для других фрэймфорков
MooTools: www.ajaxdaddy.com/mootools-autocomplete.html (спасибо Zyava)
_________
Текст подготовлен в ХабраРедакторе
комментарии (36)