Что такое элемент <datalist> в HTML5?

Представляет собой список предопределенных вариантов для элемента <input>.

Преимущества:

• Предоставляет пользователю удобный автокомплит.
• Улучшает доступность.
• Снижает вероятность ввода некорректных данных.

Использование:

Элемент <datalist> связывается с <input> с помощью атрибута list.

<input list="fruits" name="myFruit">

<datalist id="fruits">
  <option value="Яблоко"></option>
  <option value="Банан"></option>
  <option value="Вишня"></option>
</datalist>

Поддержка браузерами:

Широкая, но стоит проверить актуальную совместимость.

Отличия от <select>:

<datalist> предлагает варианты, но позволяет пользователю ввести свое значение, если оно отсутствует в списке. <select> ограничивает выбор только элементами из списка.