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

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

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

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

См. также атрибут autocomplete, который делает нечто похожее на 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>

Результат выполнения кода: