jQuery AutoComplete - автозаполнение полей форм с прибамбасиками

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

Описание

Представленный плагин мега-производителен как племенной бык. Результаты запросов кэшируются, и при последующих обращениях подбираются из кэша, а не с сервера.
Помимо этого, у плагина есть некоторые эксклюзивные функции, например использование разделителей, поиск по словам, автономное использование компонента, без отправки запроса на сервер.

Работает в IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, Chrome 1.0+

jquery.autocomplete-1.11.zip



Установка

Процедура установки достаточно обыденна: просто подключите js-файл после jQuery.

Квак! <script type="text/javascript" src="jquery.js"></ script><script type="text/javascript" src=" jquery.autocomplete.js"></script>

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

Присобачим автозаполнение к банальному input’у:

Квак! <input type="text" name="q" id="query" />

Далее пробуждается от векового сна [toolfaq]инициализируется[/toolfaq] объект автозаполнения, надобно знать, что это должно происходить после загрузки DOM-модели, иначе грязный старикашка IE 6 может впасть в маразм.

Квак! $('#query').autocomplete({ serviceUrl: 'service/autocomplete.ashx', //  Страница для обработки запросов автозаполнения minChars: 2, //  Минимальная длина запроса для срабатывания автозаполнения delimiter: /(,|;)\s*/, //  Разделитель для нескольких запросов, символ или регулярное  выражение maxHeight: 400, //  Максимальная высота списка подсказок, в пикселях width: 300, // Ширина списка zIndex: 9999, // z-index списка deferRequestBy: 0, // Задержка запроса (мсек), на случай,  если мы не хотим слать миллион запросов, пока пользователь п ечатает. Я обычно ставлю 300. params: , // Дополнительные параметры onSelect: function(data, value), // Callback функция,  срабатывающая на выбор одного из предложенных вариантов, lookup: ['January', 'February', 'March'] //  Список вариантов для локального автозаполнения });

Страничка, записанная в serviceUrl получает запрос GET , а в качестве ответа отдает данные в формате JSON:

Квак! { query:'Li', // Оригинальный запрос suggestions:['Liberia','Libyan Arab Jamahiriya',' Liechtenstein','Lithuania'], // Список подсказок data:['LR','LY','LI','LT'] // Необязательный параметр,  список ключей вариантов подсказок. Используется в callback ф ункции }

Вкл/откл автозаполнение, а снова инициализировать параметры можно через функции объекта:

Квак! var ac = $('#query').autocomplete(); ac.disable(); ac.enable(); ac.setOptons();

Стилизация

Скриптик создаёт следующий фрагментик разметочки:

Квак! <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>

Пример CSS:

Квак! .autocomplete-w1  .autocomplete  .autocomplete .selected { background:#F0F0F0;  } .autocomplete div { padding:2px 5px;  white-space:nowrap;  overflow:hidden;  } .autocomplete strong { font-weight:normal;  color:#3399FF;  }

Описание
Автозаполнение для js Prototype