Форма HTML: опция Select-Option vs Datalist-Option

Ответ 1

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

Изменить 1: То, что вы используете, зависит от ваших требований. Если пользователь должен ввести один из ваших вариантов, используйте элемент select. Если использование может ввести что-либо, используйте элемент datalist.

Изменить 2: нашел этот лакомый кусочек в уровне жизни HTML: "Каждый элемент элемента, являющийся потомком элемента datalist... представляет собой предложение".

Ответ 2

С технической точки зрения они совершенно разные. <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> из-за очень плохой поддержки браузера.

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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