Форма HTML: выбор-опция против опции-списка данных

С технической точки зрения они совершенно разные. <datalist> - абстрактный контейнер опций для других элементов. В вашем случае вы использовали его с <input type="text", но вы также можете использовать его с диапазонами, цветами, датами и т.д. http://demo.agektmr.com/datalist/

Если вы используете его с текстовым вводом, как тип автозаполнения, то на самом деле возникает вопрос: лучше ли использовать текстовый ввод свободной формы или заданный список параметров? В этом случае я думаю, что ответ немного более очевиден.

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

• Текстовое поле с текстом <datalist> имеет одну строку для обеих ярлыков отображения и отправки. В поле выбора может быть другое значение отправки или отображаемая метка <option value='ie'>Internet Explorer</option>.
• Текстовое поле < <datalist> не поддерживает группы параметров для организации отображения.
• Вы не можете ограничить пользователя списком параметров в <datalist>, как вы можете, с помощью <select>.
• Событие onchange работает по-разному. В элементе <select> событие onchange запускается сразу после изменения, тогда как при <input type="text" событие запускается после того, как элемент теряет фокус или нажимает пользователь.
• <datalist> имеет действительно пятнистую поддержку в браузерах. Способ показать все доступные варианты несовместим, и оттуда ситуация ухудшается.

Последний вопрос действительно большой, на мой взгляд. Поскольку у вас будет более универсальный резерв автозаполнения, тогда почти нет причин для решения проблемы настройки <datalist>. Кроме того, любой достойный автозаполняющий модуль позволяет использовать стиль для отображения ваших опций, которые <datalist> не выполняет. Если <datalist> принял <li> элементы, которые вы могли бы манипулировать, как хотите, это было бы здорово! Но НЕТ.

Кроме того, насколько я могу судить, поиск <datalist> является точным совпадением от начала строки. Поэтому, если у вас есть <option value="internet explorer">, и вы искали "explorer", вы не получили бы никаких результатов. Большинство плагинов автозаполнения будут искать в любом месте текста.

Я использовал <datalist> как быстрый и ленивый помощник по удобству для некоторых внутренних страниц, где я знаю с 100% уверенностью, что у пользователей самый последний Chrome или Firefox, и не будет пытаться представить фиктивные значения. В любом другом случае трудно рекомендовать использование <datalist> из-за очень плохой поддержки браузера.

Существует еще одно важное различие между select и datalist. Здесь приведен коэффициент поддержки браузера.

выбор широко поддерживается браузерами по сравнению с datalist. Пожалуйста, взгляните на эту страницу для полной поддержки браузера datalist -

Поддержка браузера Datalist

Где в качестве выбора поддерживается эффективно все браузеры (с IE6 +, Firefox 2+, Chrome 1+ и т.д.)

Datalist включает автозаполнение и предложения изначально, он также может позволить пользователю вводить значение, которое не определено в предложениях.

Выберите только предложения.

Чтобы конкретно ответить на часть вашего вопроса "Есть ли ситуации, в которой было бы лучше использовать ту или иную?", рассмотрите форму с повторяющимися разделами. Если повторяющийся раздел содержит много тегов select, тогда option должен отображаться для каждого выбора для каждой строки.

В таком случае я бы подумал использовать datalist с input, потому что тот же datalist может использоваться для любого числа input s. Это может потенциально сохранить большое количество времени рендеринга на сервере и будет масштабироваться намного лучше любого количества строк.

Я заметил, что в datalist нет выбранной функции. Он дает вам только выбор, но не может иметь параметр по умолчанию. Вы также не можете показать выбранную опцию на следующей странице.

Список данных - это новый тег HTML в поддерживаемых HTML5 браузерах. Он отображается как текстовое поле с некоторым списком параметров. Для примера для поля "Текстовое поле" он будет давать вам варианты "Мужчины", когда вы вводите "M" или "F" в текстовом поле.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Его похоже на select, но у datalist есть дополнительные функции, такие как auto suggest. Вы даже можете вводить и видеть предложения по мере ввода.

Пользователь также сможет писать элементы, которых нет в списке.