AutoComplete - расширяемый плагин автозаполнения на jQuery

Хотя и с большим опозданием (я обещала написать об этом плагине ещё 3 месяца назад), но я всё-таки пишу о простом, но довольно интересном плагине автозаполнения на jQuery.
Интересен он своей расширяемостью и тем, что при наличии прямых рук и небольшого знания jQuery и php из него можно сделать практически что угодно.

Примеры

Сначала посмотрим несколько примеров работы плагина. Кроме того, с плагином можно взаимодействовать через клавиши вверх-вниз, Enter и Esc.

Параметры

Теперь обратим внимание на параметры, которые принимает плагин. Их совсем немного.

url – адрес, к которому будет обращаться скрипт.

onClose — функция, которая позволяет изменить параметры исчезания блока.

Например:

dataSend — функция возвращает параметры для отправки на сервер.

wordClick — функция, которая, как видно по её названию, срабатывает при нажатии на выбранное слово.

Код

Теперь посмотрим на код плагина:

jQuery.fn.ac = function(o) { // объявление функции
	var o = $.extend({     // параметры по умолчанию
		url:'/upload/ac/ajax.php',  // URL для поиска слов
		onClose:function(suggest) {  // функция, которая срабатывает при закрытии окна с подсказками
			setTimeout(function(){
				suggest.slideUp('fast'); // плавно закрывает окно
			}, 100); // через 100 мс
		},
		dataSend:function(input) {  // функция, возвращающая данные для отправки на сервер
			return 'suggest_name=' + input.attr('name') + '&query=ac&word=' + word;
		},
		wordClick:function(input,link) { // функция, которая срабатывает при добавлении слова в input
			input.val(link.attr('href')).focus();
		}
	}, o);

	return $(this).each(function(){ // каждое поле для ввода
		var onClose = o.onClose;
		var input = $(this); // присваиваем переменной input
		input.after('<div class="auto-suggest"></div>'); // после него вставляем блок для подсказок
		var suggest = input.next(); // присваиваем его переменной
		suggest.width(input.width() + 6); // выставляем для него ширину
		input.blur(function(){ // когда input не в фокусе
			if (suggest.is(':visible'))  {  // если подсказки не скрыты
				input.focus(); // фокусируемся на input'e
				onClose(suggest); // и скрываем подсказки
			}
		}).keydown(function(e) {  // при нажатии клавиши
			if (e.keyCode == 38 || e.keyCode == 40) { // если эта клавиша вверх или вниз
	   			var tag = suggest.children('a.selected'),  // находим выделенный пункт
	   			new_tag = suggest.children('a:first'); // и первый в списке
	   			if (tag.length) { // если выделение существует
	   			   	if (e.keyCode == 38) { // нажата клавиша вверх
	   			   		if (suggest.children('a:first.selected').length) {  // и выделен первый пункт
		                	                new_tag = suggest.children('a:last'); // выделяем последний
		   			        } else {  // иначе
		   				        new_tag = tag.prev('a');  // выделяем предыдущий
		   			        }
		   		        } else { // иначе
		   			        if (!suggest.children('a:last.selected').length) new_tag = tag.next('a'); // выделяем следующий
		   		        }
		   		        tag.removeClass('selected'); // снимаем выделение со старого пункта
		    	        }
		    	        new_tag.addClass('selected');   // добавляем класс выделения
	                        input.val(new_tag.attr('href')); // заменяем слово в поле ввода
		    	        return;
		        }
		        if (e.keyCode == 13 || e.keyCode == 27) {   // если нажата клавиша Enter или Esc
	   		        onClose(suggest); // закрываем окно
		    	        return;
		        }
	        }).keyup(function(e) {
	       	        if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 27) return; // если нажата одна из вышеперечисленных клавиш, выходим
			        word = input.val(); // добавляем переменную со значением поля ввода
			        if (word) { // если переменная не пуста
				        $.post(o.url, o.dataSend(input), function(data){  // отправляем запрос
					        if (data.length > 0) { // если есть список подходящих слов
						        suggest.html(data).show().children('a').click(function(){ // функция, срабатывающая при нажатии на слово
							        o.wordClick(input,$(this)); // пользовательская функция, объявленная выше
							        return false;
						        });
					        } else {  // если нет
						        onClose(suggest); // закрываем окно
					        }
				        });
			        } else { // если переменная пуста
	    		                onClose(suggest); // закрываем окно
			        }
		       });
	});
}

Server-side

Для правильной работы плагина ответ от сервера должен поступать в следующем виде:

<a href="это вставляется в поле ввода">это показывается пользователю</a>
<a href="это вставляется в поле ввода">...

Пример:

<a href="пиала"><b>пи</b>ала</a>
<a href="пианизм"><b>пи</b>анизм</a>
<a href="пианино"><b>пи</b>анино</a>
<a href="пианист"><b>пи</b>анист</a>
<a href="пианола"><b>пи</b>анола</a>
<a href="пиастр"><b>пи</b>астр</a>
<a href="пивко"><b>пи</b>вко</a>
<a href="пивная"><b>пи</b>вная</a>
<a href="пивник"><b>пи</b>вник</a>
<a href="пивница"><b>пи</b>вница</a>

Ещё один пример:

<a href="пробег, контекст"><b>конт</b>екст</a>
<a href="пробег, контора"><b>конт</b>ора</a>
<a href="пробег, контра"><b>конт</b>ра</a>
<a href="пробег, контракт"><b>конт</b>ракт</a>
<a href="пробег, контраст"><b>конт</b>раст</a>
<a href="пробег, контроль"><b>конт</b>роль</a>
<a href="пробег, контрпар"><b>конт</b>рпар</a>
<a href="пробег, контузия"><b>конт</b>узия</a>
<a href="пробег, контур"><b>конт</b>ур</a>

Поддержка плагина браузерами

• IE 6+ (в седьмом IE проблемы с позиционированием)
• Opera
• Firefox
• Safari
• Chrome

По всем вопросам, связанным с работой плагина, обращайтесь в комментарии.
Удачи.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты