datalist是Html5新增的标签,主要用于自动匹配表单的可能的输入
datalist将用户可能输入的值,放在option列表里,当用户在对应的表单输入的时候,可以根据输入的关键字自动匹配option列表的内容,也可以输入option里不存在的值。
用法如下
<input list="browsers" name="browser">//表单的list属性指定对应datalist
<datalist id="browsers"> //同时datalist必须 id必须和表单的 list属性一样
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
当我们输入的关键字匹配到 datalist下option选项的value值时,该value就会提示显示。
如下图所示
如果输入的关键字,可以匹配option多项的话,那么每个匹配项都会显示
<datalist id="browsers"> //同时datalist必须 id必须和表单的 list属性一样
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="fdsdd">
<option value="defed">
<option value="Safari">
</datalist>
例外,那个小三角只有当表单获取到焦点时才会自动显示
不支持的浏览器
Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签