Автозаполнение формы с помощью jQuery

Доброго времени суток. В данной статье я покажу Вам как реализовать автозаполнение формы с помощью jQuery.

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

Для начала подключаем в head  jQuery v1.7.2, далее непосредственно сам скрипт jquery.autocomplete.js и css (ссылка в конце статьи)

<link  rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

После того как подключили, необходимо ввести список городов(это короткий список)

<script>
$(document).ready(function(){
// --- Автозаполнение ---
$("#city_from,#city_to").autocompleteArray([
' Братиславская,ул., д.22',
'1-й Курьяновский проезд',
'Абакан',
'Азамар',
'Актау',
'Актобе',
'Алдан',
....
'Томск',
'Трехгорный',
'Туапсе',
'Тула',],
		{
			delay:10,
			minChars:1,
			matchSubset:1,
			autoFill:true,
			maxItemsToShow:10/
		}
);
// --- Автозаполнение ---
});
</script>

Как видно, сначала мы указываем id наших input (#city_from, #city_to), дальше идёт список городов, а потом уже параметры.

Непосредственно наша форма в html:

<table cellspacing="0" cellpadding="3" border="0" width="900">
<tbody>
<tr>
<td>Отправка груза:<span class="required">*</span></td>
<td>из <input type="text" name="city_from" id="city_from" value="" onkeydown="if(event.keyCode==13) return false;" autocomplete="off" class="ac_input"></td>
<td>в <input type="text" name="city_to" id="city_to" value="" onkeydown="if(event.keyCode==13) return false;" autocomplete="off" class="ac_input"></td>
</tr>
</tbody>
</table>

Кстати "onkeydown="if(event.keyCode==13) return false;" запрещает отправлять форму при нажатии клавиши Enter

Расшифровка параметров:

delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши, активизируется запрос. Если используется локальный запрос (к данным, находящимся непосредственно в файле), задержку можно сильно уменьшить. Например до 40ms. (По умолчанию: 400).

minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирован запрос.

matchSubset  – использовать ли кэш для уточнения запросов. Использование этой опции может сильно снизить нагрузку на сервер и увеличить производительность. Не забудьте при этом еще и установить для cacheLength значение побольше.

autoFill – когда Вы начинаете вводить текст, в поле ввода будет подставлено (и выделено) первое подходящее значение из списка. Если Вы продолжаете вводить текст, в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного Вами текста. (По умолчанию: false).

maxItemsToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10.

На этом всё. Думаю как подключить автозаполнение к форме с Formit, проблем не возникнет. Если у Вас остались вопросы, задавайте через форму ниже.

03.01.2016 / 15795