JQuery Autocomplete: автодополнение при автозаполнении

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

Например, вот так это выглядит в гугле:

Согласитесь - удобно!

Принцип работы автокомплита достаточно прост: посетитель вводит данные в текстовое поле, браузер при каждом нажатии клавиши передает через AJAX на сервер уже набранную строку, сервер осуществляет поиск подходящих вариантов, после чего эти варианты передаются обратно пользователю и показываются. Эту систему можно как упрощать, так и усложнять, но суть от этого не изменится.

Разумеется прежде чем начать реализовывать автокомплит самостоятельно, нужно проверить а нет ли готовых средств.

Одна из первых попавшихся мне на глаза ссылок была вот эта jQuery Autocomplete

Дальше я даже не пошел, потому что наверняка, если бы я решил реализовывать автокомплит самостоятельно, мне бы все-равно пришлось использовать jQuery как для передачи данных, так и для визуализации.

Что же нужно сделать, чтобы jQuery Autocomplete заработал:

1. Скачать jquery.js и jquery.autocomplete.js, jquery.autocomplete.css. Первый, лучше взять с официального сайта jQuery, а два других есть здесь.
2. Добавить эти файлы в хэдер страницы.
3. Выбрать элемент (input) для которого будет использоваться автодополнение и присвоить ему id (например ‘’search”).
4. Добавить на страницу следующй код:
   1. jQuery(function($){
   2. $("#search").autocomplete("autocomplete.php");
   3. });

Файл autocomplete.php может возращать как текст, так и html-код. При этом для нормального функционирование в Internet Explorer нужно обязательно прописать хэдер:

1. header("Content-type: text/plain; charset=utf-8");

Разумеется этот пример демонстрирует только самый примитивный способ использования автокомплита от jQuery. Так например мне при первом же использовании понадобилось поменять стили в файле css файле, который кстати меня приятно удивил своей простотой, а также разобраться с тем, как передовать дополнительные GET-параметры серверному скрипту. Вот как это выглядит:

1. $("#search_region").autocomplete( "index.php",
2. {
3. extraParams: {module : "hotelpnforms", type : "ajax", func : "region_autocomplete"},
4. autoFill:true
5. }
6. );

Параметр autoFill включает опцию автоматического заполнения поля ввода первым вариантом из возможных.

Более подробная документация по jQuery Autocomplete находится здесь.

Источник: http://bagryan.ru/archives/11