您可能已经在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>
元素时才加载它们。
就这样,现在您可以查看正在运行的演示或从下面的链接下载源文件。
更多资源
以下是一些可以进一步深入研究该主题的资源。
- HTML5数据列表元素,其他控件的预定义选项 – W3.org
- HTML5数据列表 – David Walsh
- 动态HTML5数据列表控件的示例 – Raymond Camden