<datalist> добавляет полю ввода готовые подсказки, которые пользователь видит при вводе - но, в отличие от <select>, не ограничивает его: ввести можно и вариант из списка, и что-то своё. Связь между полем и списком подсказок задаётся не вложенностью, а совпадением двух атрибутов - list у input и id у datalist.
Кликни по полю справа и начни печатать - браузер сам покажет подсказки из списка. Но попробуй ввести и что-то, чего в списке нет, например "Клубника" - поле всё равно примет значение: datalist только подсказывает, а не ограничивает.
Как связать datalist с полем ввода
Тег <datalist> сам по себе не показывается на странице - у него по умолчанию display: none, он существует только как источник подсказок. Чтобы связать его с конкретным полем, нужно совпадение двух атрибутов: id у datalist и list у input - вложенность друг в друга не нужна, они могут находиться в любом месте документа. Внутри datalist перечисляются теги <option>, и именно атрибут value каждого из них становится значением, которое попадёт в поле при выборе подсказки.
<input list="flavors"><datalist id="flavors"><option value="Ваниль"></datalist> - list и id совпадают, подсказки появятся.
<input list="flavor"><datalist id="flavors"><option value="Ваниль"></datalist> - опечатка (flavor вместо flavors): значения не совпадают, подсказки не появятся, и никакой ошибки в консоли при этом не будет.
Чем datalist отличается от select
Главное отличие: <select> ограничивает выбор строго предложенными вариантами, а <datalist> - только подсказка, которую можно проигнорировать и ввести своё значение; поле с таким "чужим" значением всё равно пройдёт обычную проверку валидности. Второй важный момент - реальная непоследовательность между браузерами: MDN прямо указывает, что datalist не входит в Baseline и "не работает в некоторых широко используемых браузерах" - на практике это означает разное отображение и разную логику поиска совпадений (например, где-то ищут совпадение в любом месте строки, а где-то только в начале). Для критичных сценариев стоит проверять поведение в нескольких браузерах, а не полагаться на то, что оно везде одинаковое.
<select><option>Ваниль</option><option>Шоколад</option></select> - только эти два варианта, ничего своего ввести нельзя.
Использовать datalist там, где выбор ДОЛЖЕН быть строго ограничен (например, код страны из фиксированного списка) - пользователь всё равно сможет ввести произвольный текст.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Думать, что datalist ограничивает ввод так же, как select | Пользователь может ввести что угодно, а не только вариант из списка | Если выбор должен быть строго ограничен - использовать select, а не datalist |
| Опечатка в list или id, из-за которой значения не совпадают буквально | Подсказки просто не появляются, ошибки в консоли при этом не будет | Внимательно сверять оба значения |
| Полагаться на datalist для критичной функциональности без проверки в разных браузерах | Отображение и логика поиска совпадений реально отличаются между браузерами | Тестировать в нескольких браузерах или закладывать запасной вариант интерфейса |
| Ожидать, что datalist сам провалидирует введённое значение | datalist не проверяет ввод - за это отвечают отдельные атрибуты вроде required и pattern | Сочетать datalist с обычными атрибутами валидации, если проверка нужна |
| Не указывать атрибут value у option, оставляя только текст внутри тега | В качестве отправляемого значения браузер использует именно value | Всегда явно указывать value у каждого option |
Шпаргалка
| Тег/атрибут | Что делает |
|---|---|
| <datalist> | Список подсказок для поля ввода - не ограничивает сам ввод |
| list (у input) | Связывает input с datalist по совпадению с его id |
| option внутри datalist | value - то, что попадёт в поле при выборе подсказки |
| Нужен строгий выбор только из списка | select, а не datalist |
| Поддержка в браузерах | Не входит в Baseline - отображение и поиск совпадений отличаются между браузерами |
Коротко: отвечаем на вопросы
Может ли пользователь ввести значение, которого нет в datalist?
Да, и это нормальное поведение. datalist - это список рекомендуемых, а не обязательных значений: поле по-прежнему принимает любой текст, который проходит собственную валидацию (если она есть), даже если его нет среди подсказок.
Чем datalist отличается от select?
select жёстко ограничивает выбор только предложенными вариантами - ничего другого ввести нельзя. datalist же просто подсказывает варианты поверх обычного текстового поля, оставляя пользователю возможность ввести своё значение.
Работает ли datalist одинаково во всех браузерах?
Нет. Сама MDN отмечает, что этот тег не входит в Baseline и не работает в некоторых широко используемых браузерах, а на практике отличается и отображение подсказок, и логика поиска совпадений (например, поиск в любом месте строки против поиска только с начала). Для важных сценариев стоит проверить поведение в нескольких браузерах.
С какими типами input работает datalist?
Лучше всего - с текстовыми типами (text, search, url, tel, email, number) и датой/временем (date, time, month, week, datetime-local). С range список показывается как засечки на шкале, а с color - как набор готовых цветов. Поведение при этом может отличаться от браузера к браузеру.
