Хочу представить вашему вниманию очередной плагин для 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)