网页制造aiyiweb文章简介：datalist普通不会独行江湖，它需求与input标签的搭配使用，就像label标签与input标签搭配使用一样。既然与input标签搭配使用，那么这两个标签之间必定存在着“特殊的关系”，不然input与datalist就互不相认了，那么如何才能让他们建立起来这种关系呢？这个时候我们需求

注：在其它的一些教程或材料中datalist标签称为下拉列表，我认为这种叫法不够精确，而且不能一下子理解此标签。比如前段时间：“一个朋友问我datalist是不是一种能自定义款式的select？”，后来才知道，有些书籍或教程中称为下拉列表而导致初学者理解错。那么此标签怎样称呼它才合适呢？我们看完下面的案例后，我再说明：

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="Aiyiweb.Com-search" />
• <datalist id="Aiyiweb.Com-search">
• <option value="Aiyiweb.Com">
• <option value="W3C标准">
• <option value="W3C规则">
• <option value="W3C验证">
• <option value="前端开发">
• <option value="前端开发网">
• <option value="2天驾驭DIV+CSS">
• <option value="Aiyiweb.Com">
• </datalist>
  

datalist说明：
团体认为称呼datalist为自动补全列表愈加合适，由于它并不是下拉列表。