HTML5元素datalist自动补全的例子

atalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。

datalist介绍：datalist一般不会独行江湖，它需要与input标签的搭配使用，就像label标签与input标签搭配使用一样。既然与input标签搭配使用，那么这两个标签之间必定存在着“特殊的关系”，不然input与datalist就互不相认了，那么如何才能让他们建立起来这种关系呢？这个时候我们需要一个新的属性list（注意，不是for），list与for的用法一样，list的值设置为表单元素的 id，这样他们便会自动关联了。

元素介绍的用处了。代码包含<option>并不是独立控制，相反它是附加在<input type="text"/>

浏览器效果

<input type="text" />
<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
<option value="Brackets" label="by Adobe" />
<option value="Coda" label="by Panic" />
<option value="Dreamweaver" />
<option value="Espresso" />
<option value="jEdit" />
<option value="Komodo Edit" />
<option value="Notepad++" />
<option value="Sublime Text 2" label="the developer's choice" />
<option value="Taco HTML Edit" />
<option value="Textmate" />
<option value="Text Pad" />
<option value="TextWrangler" />
<option value="Visual Studio" />
<option value="VIM" />
<option value="XCode" />
</datalist>

ios和Android，你可以在这里查看最新支持：canIUse
Draft Specification on W3C

datalist标签自动补全

Chrome对此标签支持不好，Firefox和Opera可很好的支持。

datalist作用：

我们经常在网上的搜索框中看到当输入一个字符，输入框下方会自动列出你输入的关键词，比如Google或百度的搜索，如下图：

此效果非HTML5的datalist技术实现

datalist案例：

<input list="w3cfuns-search" />
<datalist id="w3cfuns-search">
        <option value="W3Cfuns">
        <option value="W3C标准">
        <option value="W3C规则">
        <option value="W3C验证">
        <option value="前端开发">
        <option value="前端开发网">
        <option value="2天驾驭DIV+CSS">
        <option value="W3CSchool">
</datalist>
datalist说明：

个人认为称呼datalist为自动补全列表更加合适，因为它并不是下拉列表。

浏览器兼容性

下面的数据来自caniuse。

可以看出，遥遥领先的依然是风采依旧的Chrome，对该元素的支持全线飘绿；
同时Firefox也是毫不示弱，紧随版本帝之后;
而其他浏览器情况则各不相同，正所谓性福的人都相似，不幸的人各有不幸。
Opera在边缘浏览器中表现强劲，绿得很耀眼；
值得注意的是，在这场不算较量的较量中，苹果太子Safari则是黑马般拿到了垫底的位置，全线飘红。这直接一举打破IE在主流浏览器的各种评测中常年垫底的记录。
而IE虽然摆脱了末位的阴影，但即使是最新的IE11也只是对Datalist元素进行了部分支持，所以要与各强劲对手比肩而受到前端开发者的青睐还有些工作要做。但留给IE翻盘的时间已经不多了，正如留给中国队的时间一样~