Тег datalist

Тег datalist создает автозаполнение для полей ввода input в HTML форме.

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

Чтобы привязать к тегу input автозаполнение, ему необходимо задать атрибут list, в котором следует указать атрибут id привязываемого тега datalist.

Варианты выбора хранятся в тегах option, которые в свою очередь хранятся в теге datalist.

Пример

Давайте в поле ввода введем страну. Введем вначале букву 'б' - и увидим вплывающую подсказку из трех стран. Затем введем еще и букву 'е' - количество предложенных стран сократится до двух:

<input type="text" list="country">
<datalist id="country">
	<option>Беларусь</option>
	<option>Бельгия</option>
	<option>Болгария</option>
</datalist>

Пример

Давайте теперь к тегу option добавим атрибут value. При выборе определенной страны в привязанный инпут попадет не название страны, а содержимое атрибута value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Беларусь">Беларусь - страна озер и картошки</option>
	<option value="Бельгия">Бельгия - страна, в которой живут бельгийцы</option>
	<option value="Болгария">Болгария - страна для отдыха</option>
</datalist>

Пример . Влияние атрибута autocomplete

На выпадающий список подсказок оказывает влияние атрибут autocomplete. Если он включен (а так и будет по умолчанию), то к значениям, которые вы задали в теге datalist, будут примешиваться те значения, которые пользователь вводил в это поле ранее.

Вбейте в поле 'Бразилия' и нажмите кнопку отправки(без отправки браузер не запомнит то, что вы вводили ранее, в нашем случае Бразилию). Затем вернитесь к этому примеру и введите букву 'б' - в появившемся списке вы увидите не только 3 страны из datalist, но и вбитую ранее Бразилию (кроме того, если вы проделаете то же самое со словом 'Беларусь' - в выпадающем списке будет две Беларуси).

Если вам это мешает - отключите атрибут autocomplete, добавив ему значение off.

Проделайте описанные выше манипуляции с примером:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Беларусь</option>
		<option>Бельгия</option>
		<option>Болгария</option>
		<input type="submit">
	</datalist>
</form>

Смотрите также

атрибут autocomplete,
который делает нечто похожее на тег datalist