# Тег 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`

←→
↑