Html5之datalist-自动匹配的的表单输入

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 标签