介绍HTML5“数据列表”元素

HTML5引入了许多新元素，其中包括一些有趣的表单控件。 这样一个有用但鲜为人知的控件是datalist元素。 让我们看看它可以为我们做什么。

假设我们有一个表单，并且希望用户输入文本字符串，例如其名称。 我们有<input type="text" />元素，该元素将允许用户键入他或她喜欢的任何内容。 想象一下，我们希望用户输入他或她的居住国； 我们可能会使用<select>元素。 这会将结果限制为可用的选项（有时是一件好事），并且还会向用户显示潜在的庞大列表供您选择。

但是，如果我们希望用户自由输入自己喜欢的东西，同时又得到一些建议，该怎么办？ 这是datalist来源。

---

如何使用？

datalist包含的option元素与select元素非常相似，尽管datalist本身不是独立的控件。 而是使用list属性将其添加或附加到<input type="text" />元素。 考虑以下标记：

<label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" />
		<option value="Coda" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

我们有一个常规的<input type="text" />控件，它带有一个id和新的list属性。 这告诉浏览器从datalist元素中加载具有相应ID的值或建议列表。

然后是带有上述id的实际datalist元素和option元素的集合。 这就是将值附加到input控件的方式。

当我们在浏览器中运行它时，我们将看到一个正常的文本框，然后当我们开始键入（或按向下箭头键（在Firefox和Chrome中有效，但在Opera中不起作用））时，将显示完整或过滤的列表。 在我们键入内容时，只会显示相关的选项，就像Google的“搜索”框显示建议的方式一样。 但是请注意，各浏览器之间确实存在细微的行为差异。

根据W3C官方网站 ，该datalist可用于：

• <input type="text" />
• <input type="url" />
• <input type="tel" />
• <input type="color" />
• 数据和时间（包括月份等），范围等。

---

更多属性

我们可以通过addind label属性将选项更进一步，如以下某些项目所示：

<label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" label="by Adobe" />
		<option value="Coda" label="by Panic" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" label="the developer's choice" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

准确地显示和处理这些标签的方式取决于浏览器-查看下方的“ 怪癖”部分以了解如何操作。

---

现在可以使用吗？

直到最近，浏览器对datalist支持仍然很窄。 现在，IE 10 +，Firefox 4 +，Chrome和Opera支持它（尚无Safari）。 Opera Mobile和Firefox for Android也支持它。 看一下该屏幕快照，显示caniuse.com列出的当前状态：

较旧的浏览器将自动忽略datalist元素。

提到的总体支持率为48.36％。 可以说不是很好，但是积极的消息是，较旧的浏览器将自动忽略datalist元素，从而给我们带来优雅的降级体验。 实际上，所有新HTML5表单元素都是如此。 如果需要支持较旧的浏览器，则可以将jQuery Autocomplete用作备用。

---

怪癖

由于更广泛的浏览器支持只是最近才出现，因此供应商可以做出可预测的解释。 Firefox和Chrome使用OS主题来设置列表选项的样式，而Opera将从input字段继承某些样式（颜色，字体系列）。 除此之外，别忘了使用CSS设置datalist元素的样式。

行为也就如何过滤值而有所不同。 当使用option元素的label和value属性时，每个浏览器对列表的处理option都不同。

例如，Opera将基于值和标签进行过滤。 在我们的案例中，“ by A”和“ Brac”都将返回“ Brackets”。

但是，Chrome将忽略该标签。 例如，“ by A”将不返回任何结果，而“ Brac”将返回任何结果。

Firefox仅显示标签（如果已定义）。 “ by A”将返回“ by Adob​​e”，但是“ Brackets”根本不存在！

---

结论

在实现方面，还有很多改进的余地，但是总的来说，这是对Web领域的欢迎。 希望这能激发您的胃口！

翻译自: https://webdesign.tutsplus.com/tutorials/introducing-the-html5-datalist-element--webdesign-9888