DataList：HTML5中的input输入框自动提示利器

DataList的做用是在你往input输入框里输入信息时，根据你敲进去的字母，自动显示一个提示下列列表，很像百度或谷歌的搜索框的自动提示，在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个很是有用的元素。

DataList的表现很像是一个Select下拉列表，但它只是提示做用，并不限制用户在input输入框里输入什么。 HTML5 Datalist的语法其实跟select下拉列表的语法几乎彻底同样，很是的简单！

<label for="country_name">国家 : </label><input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
   <option value="Afghanistan 阿富汗">
   <option value="Albania 阿尔巴尼亚">
   <option value="Algeria 阿尔及利亚">
   <option value="Andorra 安道尔共和国">
   <option value="Angola 安哥拉">
</datalist>

须要注意的是，input输入框的list属性值是datalist的id，这样datalist才能和input输入框关联起来，在以前介绍range类型时曾见到提到过它。 datalist自身并不显示，只在须要配合input输入时才会自动显示出来。

下面咱们来看一个实际例子，在下面的输入框里，任意输入几个字母，datalist就会提示给你包含这几个字符的英文国家名称。

国家名称(英文) 

若是你的浏览器太古老，看不到上面的效果，下面的这张图片能够让你过一下眼瘾。

这个例子用的是英文，但中文其实也同样。你不妨自动动手试一下。很是的简单，之前这样的效果基本上只能用讲Javascript实现，须要你有至关的javascript基本功，而如今，感谢HTML5，只须要纯HTML就能达到这样的神奇效果。

Datalist跟JavaSript比起来也有一些短板，好比当数据量很大时，好比上千条信息，这样的数据量不宜所有都写到页面里，这时，使用Javascript动态加载会提升效率。但对于普通的应用，Datalist是彻底够用的。你认为呢？