HTML форма: Select-Option vs Datalist-Option

мне было интересно, каковы различия между Select-Option и Datalist-Option. Есть ли ситуация, в которой было бы лучше использовать то или другое? Пример каждого из них:

Select-Option

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-Option

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
104
html-datalist html-form html-select html5

8 ответов

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

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

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

135

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

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

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

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

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

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

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

47

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

Select дает только предварительно определенные параметры, которые пользователь должен выбрать из

2

список данных-это новый HTML-тег в браузерах, поддерживаемых HTML5. Он отображается в виде текстового поля со списком опций. Например, для текстового поля Gender он даст вам варианты как мужской женщины при вводе "M" или " F " в текстовом поле.

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

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

0

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

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

0

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

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

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

где as select поддерживается во всех браузерах (начиная с IE6+, Firefox 2+, Chrome 1+ и т. д.)

0

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

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

-1