HTML 表单：Select-Option 与 Datalist-Option

HTML Form: Select-Option vs Datalist-Option

提问by user928984

I was wondering what the differences are between Select-Option and Datalist-Option. Is there any situation in which it would be better to use one or the other? An example of each follows:

我想知道 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>

回答by james.garriss

Think of it as the difference between a requirement and a suggestion. For the selectelement, the user is required to select one of the options you've given. For the datalistelement, it is suggested that the user select one of the options you've given, but he can actually enter anything he wants in the input.

将其视为需求和建议之间的区别。对于select元素，用户需要选择您提供的选项之一。对于datalist元素，建议用户选择您提供的选项之一，但他实际上可以在输入中输入他想要的任何内容。

Edit 1: So which one you use depends upon your requirements. If the user mustenter one of your choices, use the selectelement. If the use can enter whatever, use the datalistelement.

编辑 1：所以您使用哪一个取决于您的要求。如果用户必须输入您的选择之一，请使用该select元素。如果使用可以输入任何内容，请使用datalist元素。

Edit 2: Found this tidbit in the HTML Living Standard: "Each option element that is a descendant of the datalist element...represents a suggestion."

编辑 2：在HTML Living Standard 中发现这个花絮：“作为 datalist 元素的后代的每个选项元素......代表一个建议。”

回答by mastaBlasta

From a technical point of view they're completely different. <datalist>is an abstract container of options for other elements. In your case you've used it with <input type="text"but you can also use it with ranges, colors, dates etc. http://demo.agektmr.com/datalist/

从技术角度来看，它们是完全不同的。<datalist>是其他元素选项的抽象容器。在您的情况下，您已经使用它，<input type="text"但您也可以将它与范围、颜色、日期等一起使用。http://demo.agektmr.com/datalist/

If using it with text input, as a type of autocomplete, then the question really is: Is it better to use a free-form text input, or a predetermined list of options? In that case I think the answer is a bit more obvious.

如果将它与文本输入一起使用，作为一种自动完成，那么问题真的是：使用自由格式的文本输入还是预先确定的选项列表更好？在那种情况下，我认为答案更明显一些。

If we focus on the use of <datalist>as a list of options for a text field then here are some specific differences between that and a select box:

如果我们专注于使用<datalist>文本字段的选项列表，那么这里是它和选择框之间的一些具体区别：

• A <datalist>fed text box has a single string for both display label and submit. A select box can have a different submit value vs. display label <option value='ie'>Internet Explorer</option>.
• A <datalist>fed text box does not support the <optgroup>tag to organize the display.
• You can not restrict a user to the list of options in a <datalist>like you can with a <select>.
• The onchangeevent works differently. On a <select>element, the onchange event is fired immediately upon change, whereas with <input type="text"the event is fired after the element loses focus or the user presses enter.
• <datalist>has really spotty support across browsers. The way to show all available options is inconsistent, and things only get worse from there.

• 一个<datalist>喂文本框有两个显示标签，并提交一个字符串。选择框可以具有不同的提交值与显示标签<option value='ie'>Internet Explorer</option>。
• 一个<datalist>喂文本框不支持<optgroup>标签来组织显示屏。
• 您不能<datalist>像使用<select>.
• 该平变化事件的工作方式不同。在<select>元素上，onchange 事件在更改时立即触发，而 with<input type="text"事件在元素失去焦点或用户按下 Enter 后触发。
• <datalist>跨浏览器的支持确实参差不齐。显示所有可用选项的方式不一致，而且情况只会变得更糟。

The last point is really the big one in my opinion. Since you will HAVE to have a more universal autocomplete fallback, then there is almost no reason to go through the trouble of configuring a <datalist>. Plus any decent autocomplete pluging will allow for ways to style the display of your options, which <datalist>does not do. If <datalist>accepted <li>elements that you could manipulate however you want, it would have been really great! But NO.

最后一点在我看来真的很重要。由于您必须拥有更通用的自动完成回退，因此几乎没有理由配置<datalist>. 此外，任何体面的自动完成插件都可以让您对选项的显示进行样式设置，而这<datalist>是不行的。如果<datalist>接受<li>您可以随意操纵的元素，那就太棒了！但不是。

Also insofar as i can tell, the <datalist>search is an exact match from the beginning of the string. So if you had <option value="internet explorer">and you searched for 'explorer' you would get no results. Most autocomplete plugins will search anywhere in the text.

此外，据我所知，<datalist>搜索是从字符串开头开始的完全匹配。因此，如果您<option value="internet explorer">搜索了 'explorer'，您将不会得到任何结果。大多数自动完成插件将搜索文本中的任何位置。

I've only used <datalist>as a quick and lazy convenience helper for some internal pages where I know with a 100% certainty that the users have the latest Chrome or Firefox, and will not try to submit bogus values. For any other case, it's hard to recommend the use of <datalist>due to very poor browser support.

我只用作<datalist>一些内部页面的快速和懒惰的方便助手，我 100% 确定用户拥有最新的 Chrome 或 Firefox，并且不会尝试提交虚假值。对于任何其他情况，<datalist>由于浏览器支持非常差，很难推荐使用。

回答by user3167654

Datalist includes autocomplete and suggestions natively, it can also allow a user to enter a value that is not defined in the suggestions.

Datalist 本身包括自动完成和建议，它还可以允许用户输入未在建议中定义的值。

Select only gives you pre-defined options the user has to select from

Select 只为您提供用户必须从中选择的预定义选项

回答by Deepak

Data List is a new HTML tag in HTML5 supported browsers. It renders as a text box with some list of options. For Example for Gender Text box it will give you options as Male Female when you type 'M' or 'F' in Text Box.

数据列表是支持 HTML5 的浏览器中的新 HTML 标签。它呈现为带有一些选项列表的文本框。例如性别文本框，当您在文本框中键入“M”或“F”时，它将为您提供男性和女性选项。

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

回答by Bruce Pierson

To specifically answer a part of your question "Is there any situation in which it would be better to use one or the other?", consider a form with repeating sections. If the repeating section contains many selecttags, then the options must be rendered for each select, for every row.

要具体回答您问题的一部分“在哪种情况下使用一种或另一种会更好？”，请考虑具有重复部分的表格。如果重复部分包含许多select标签，则option必须为每个选择、每一行呈现 s。

In such a case, I would consider using datalistwith input, because the same datalistcan be used for any number of inputs. This could potentially save a large amount of rendering time on the server, and would scale much better to any number of rows.

在这种情况下，我会考虑使用datalistwith input，因为它datalist可以用于任意数量的inputs。这可能会在服务器上节省大量渲染时间，并且可以更好地扩展到任意数量的行。

回答by neophyte

There is another important difference between selectand datalist. Here comes the browser support factor.

select和之间还有另一个重要区别datalist。这是浏览器支持因素。

select is widely supported by browsers compared to datalist. Please take a look at this page for complete browser support of datalist--

与 datalist 相比，select 被浏览器广泛支持。请查看此页面以了解数据列表的完整浏览器支持--

Datalist browser support

数据列表浏览器支持

Where as select is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

所有浏览器都有效支持选择（自 IE6+、Firefox 2+、Chrome 1+ 等）

回答by Viyaan Jhiingade

Its similar to select, But datalist has additional functionalities like auto suggest. You can even type and see suggestions as and when you type.

它类似于 select，但 datalist 有额外的功能，比如自动建议。您甚至可以在输入时输入并查看建议。

User will also be able to write items which is not there in list.

用户还可以写入列表中没有的项目。

回答by Weihui Guo

I noticed that there is no selected feature in datalist. It only gives you choice but can't have a default option. You can't show the selected option on the next page either.

我注意到数据列表中没有选定的功能。它只给你选择，但不能有默认选项。您也无法在下一页显示所选选项。