• Категории: Потоковое содержимое, Фразовое содержимое
• Контекст:

  Где ожидается фразовое содержимое.

• Модель:

  Фразовое содержимо, либо ноль или более элементов <option>.

Тег <datalist> (от анг. "data list" - список данных) позволяет создать список подсказок и привязать его к текстовому полю <input>. Изначально подсказки скрыты и появляются в момент фокусировки на связанном поле. По ходу набора подсказки также фильтруются и остаются только те, что соответствуют набираемому значению. Пользователь может выбрать один из предложенных вариантов, либо написать собственное значение. Введенные пользователем значения также могут сохраниться в подсказках и показываться при выборе в течение данной сессии.

Чтобы связать поле со списком вариантов, используется атрибут list, значение которого должно совпадать со значением id списка. Сами же варианты подсказок создаются во вложенных элементах <option>. В отличии от списков <select>, в данном случае текст между <option> не учитывается. Вместо этого пользовать видит непосредственно содержимое атрибутов value.

Атрибуты

• Глобальные атрибуты

• Подсказки

  Классический вариант подсказок выглядит следующим образом. У нас есть список <datalist> с элементами <option>, а также связанное с ними поле <input> с атрибутом list:

• Альтернативный вариант

  Для пользователей, у которых не поддерживается элемент <datalist>, мы можем прописать более сложное содержимое в виде традиционного списка <select>. В случае нормальной поддержки <datalist> данный список будет проигнорирован, а его варианты использованы как варианты для подсказок: