datalist标签：
datalist介绍：
datalist一般不会独行江湖，它需要与input标签的搭配使用，就像label标签与input标签搭配使用一样。既然与input标签搭配使用，那么这两个标签之间必定存在着“特殊的关系”，不然input与datalist就互不相认了，那么如何才能让他们建立起来这种关系呢？这个时候我们需要一个新的属性list（注意，不是for），list与for的用法一样，list的值设置为表单元素的 id，这样他们便会自动关联了。
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为自动补全列表更加合适，因为它并不是下拉列表。
以上就是HTML5每日一练之datalist标签自动补全的使用的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
相关文章：
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
