HTML5数据列表

One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used functionality has been moved from a JavaScript-only utility to HTML via the new DATALIST element.

过去十年中，最常用JavaScript小部件之一是文本框自动完成小部件。 每个JavaScript框架都有自己的自动填充小部件，其中许多已经变得相当先进。 就像占位符属性对标记的介绍一样，常用的功能已通过新的DATALIST元素从仅JavaScript的实用程序移至HTML。

View Demo 观看演示

HTML (The HTML)

A DATALIST element gets an ID attribute and contains numerous OPTION elements, just as a SELECT element would:

DATALIST元素具有ID属性，并包含许多OPTION元素，就像SELECT元素一样：

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Once the DATALIST element is in place, a list attribute gets added to an INPUT element which refers to the list ID:

DATALIST元素放置到位后，会将list属性添加到引用列表ID的INPUT元素中：

<input name="frameworks" list="frameworks" />

View Demo 观看演示

What's provided is a very rudimentary but useful autocomplete list of existing items that match given text.  Of course the lack of styling that comes with OPTION elements isn't optimal, and there's no method to hook DATALIST's up to a service endpoint for more dynamic suggestions, but this new element is a step in the right direction!

提供的内容是非常基本但有用的与给定文本匹配的现有项目的自动完成列表。 当然， OPTION元素缺少样式不足不是最佳选择，也没有方法可以将DATALIST挂接到服务端点以获取更多动态建议，但是这个新元素是朝正确方向迈出的一步！

翻译自: https://davidwalsh.name/datalist