Предистория

Пару месяцев назад для одного проекта я делал автозаполнение на Mootools. Тут все оказалось проще, чем я думал. Плагинов хоть было и мало, но я нашел то, что искал — плагин от Гаральда Киршнера, автора потрясающих плагинов под Mootools.

Буквально на днях задача повторилась, но теперь нужна была версия под jQuery. «Да как два пальца о кнехт» сказал я и открыл Гугл. Через час выяснилось, что да, плагины есть, много, разные, красивые, но — все не те. Кришнеровского удобства в них не было. 

jQuery версия

Как я уже сказал, подходящих мне плагинов на jQuery не было, но был более-менее похожий — модификация плагина «jQuery Autocomplete» от ПенгоВоркс. Что меня в нем не устраивало? Посмотрим на две картинки: левая — поле поиска в Сафари, правая — работа плагина до моего вмешательства.

Суть в том, что когда вы набираете строку для поиска, под ней появляются варианты. Если нажать стрелку вниз, то в Сафари строка в поле будет дополняться автоматически, и добавленная часть сразу же выделяется. Если подвигать стрелку, то будет меняться только подставляемая часть. В плагине же ничего не менялось. Это было неудобно.

Итак, посмотрим на код. Привязываем плагин:

<input name="autocomlete" type="text" id="autocomplete" />

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#autocomplete').autocomplete('backend1.php', {
		delay: 10,
		minChars: 1,
		matchSubset: 1,
		autoFill: true,
		maxItemsToShow: 10
	});
});
</script>

Отлично, файл backend1.php в ответ на GET запрос возвращает нам простой текст, где каждое слово должно быть на новой строке:

<?php 
/* Подключаетесь к базе и
/* выбираете из нужной таблицы
/* нужный столбец */

$res = mysql_query($sql);
while ($street = mysql_fetch_array($res)) {
	echo $street['name'].'\r\n'; // Выводите как простой текст
}
?>

Просто, не так ли? Возможные парамерты скрипта вы можете посмотреть в документации. Но я думаю, для обычной работы вам они не потребуются.

Демо Скачать

Mootools версия

Как я уже сказал, этот плагин написал Гаральд Кершнер. Скрипт может получать данные как из текущего документа (они ему передаются как параметры), так и запрашивать из с помощью AJAX (HTML или JSON). Я рассмотрю пример с HTML, так он мне ближе и понятнее.

Привязываем скрипт к полю:

<input name="autocomlete" type="text" id="autocomplete" />

<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript" src="mootools/Observer.js"></script>
<script type="text/javascript" src="mootools/Autocompleter.js"></script>
<script type="text/javascript" src="mootools/Autocompleter.Request.js"></script>
<script type="text/javascript">
document.addEvent('domready', function() {

	var inputWord = $('autocomplete');
	new Autocompleter.Request.HTML(inputWord, 'backend.php');
 
});
</script>

На сервере отдаем данные, соответствующие POST запросу:

<?php 
/* Подключаетесь к базе и
/* выбираете из нужной таблицы
/* нужный столбец */

$res = mysql_query($sql);
while ($street = mysql_fetch_array($res)) {
	echo '<li>'.$street['name'].'</li>'; // Выводите как элементы списка
}
?>

Демо Скачать

Надеюсь, что в поисках плагина для автозаполнения вы теперь не будете тратить несколько часов — вы просто зайдете на Временно.нет, перечитаете статью и быстренько сделаете все как надо. Удачи!