HTML-формы: выберите вариант против таблицы-опция

С технической точки зрения они совершенно разные. <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>.
• The onchange событие работает по-разному. На <select> элемент, событие onchange запускается сразу после изменения, тогда как с <input type="text" событие запускается после того, как элемент теряет фокус или пользователь нажимает клавишу Ввод.
• <datalist> имеет действительно пятнистую поддержку в браузерах. Способ отображения всех доступных параметров является непоследовательным, и все становится только хуже.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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