柴静调查:穹顶之下_调查：HTML5数据列表

您可能已经在Web上的某处遇到了这种响应： 在输入表单中输入内容时，建议列表会出现在输入内容的底部 。

多年来，我们依靠JavaScript来创建这样的功能。今天，我们可以使用新的HTML5 <datalist>元素来做到这一点。这个HTML5新元素允许我们存储选项列表，这些选项列表将在用户在输入中键入时显示。

HTML5列表属性

可以使用新HTML5属性list将<datalist>链接到<input>元素。我们可以在几种输入类型（例如text和search使用list 。但是，根据Mozilla开发人员网络， list属性不适用于以下输入类型： hidden ， checkbox ， radio ， file和button 。

在以下示例中，我们使用<datalist>添加城市列表，并为其分配ID属性，如下所示。

<datalist id="city"><option value="Adelaide"><option value="Bandung"><option value="Bangkok"><option value="Beijing"><option value="Hanoi"><option value="Ho Chi Minh City"><option value="Hong Kong"><option value="Jakarta"><option value="Kuala Lumpur"><option value="Osaka"><option value="Seoul"><option value="Shanghai"><option value="Singapore"><option value="Surabaya"><option value="Sydney"><option value="Tokyo">
</datalist>

要将<datalist>挂接到<input>元素，只需添加list属性并引用id属性，就像这样。

<input class="destination-list" type="text" placeholder="From:" list="city">
<input class="destination-list" type="text" placeholder="To:" list="city">

浏览器行为

另一方面，当我们单击输入两次时 ，它将显示所有可用选项，如下所示。

专注于输入内容时， Firefox将不显示任何内容。它将显示包含我们键入的值的选项。例如，下面的屏幕截图显示了Firefox显示包含字母“ u”的选项。

结合使用HTML5数据列表和Polyfills

有一些polyfill可以在不受支持的浏览器中复制类似的功能。在本文中，我们将实现Michael Taylor的数据列表polyfills 。要使用它，我们将需要jQuery和Modernizr来进行浏览器功能检测。

至于Modernizr，我们必须进行一些自定义。在Modernizr下载页面中，检查以下选项。

HTML5部分下的输入属性
可扩展性部分下的Modernizr.addTest
Extra部分下的Modernizr.load
非核心检测下的elem-datalist

现在，让我们打开HTML文档，在其中添加<datalist>元素，并添加刚刚在<head>部分下载的Modernizr库。

<script src="js/modernizr.js" type="text/javascript"></script>

添加Modernizr之后，我们可以使用以下脚本测试浏览器是否支持datalist元素。

if (!Modernizr.datalistelem) {alert('This browser does not support HTML5 datalist element, so we will load the polyfills');
}

当不支持datalist元素时，上面的脚本将显示一条警报，提示“此浏览器不支持HTML5数据列表元素，因此我们将加载polyfills” 。在Safari中，它看起来像这样。

接下来，创建一个名为load.datalist.js的新JavaScript文件，并在下面添加此行。这会将脚本定向到具有list属性的输入并将其运行。

$('input[list]').datalist();

最后，我们将使用Modernizr.load加载jQuery， jquery.datalist.js和load.datalist.js ，如下所示。

Modernizr.load({test: Modernizr.datalistelem,nope: ['js/jquery.js', 'js/jquery.datalist.js', 'js/load.datalist.js']
});

因此，仅在浏览器不支持<datalist>元素时才加载它们。

就这样，现在您可以查看正在运行的演示或从下面的链接下载源文件。

观看演示
下载源