HTML5，datalist的作用

1、首先从图中代码可以看出，datalist和select控件一样，都是内嵌option选项，二者有没有一点关系呢？

2、按这个代码运行页面，界面上并没有显示任何datalist的控件。

3、其实这个datalist要和input输入框来配合使用，我们在代码里添加一个输入框。如图，输入框的list要和datalist的id相对应。

4、在FireFox下，页面显示的输入框和平时普通的输入框没什么区别。但在Chrome下，在鼠标经过或获取到焦点时，会有箭头。

5、双击这个输入框，就会弹出datalist的选项了，弹出来后，就可以像select控件一样，点击选择这些选项，选中后对应的值就会显示在input输入框里。

6、和select控件不一样的是，这个输入框除了可以选择选项外，我们还可以直接输入内容。不受选项的影响。所以当你的输入框亟冁雇乏需要提供一些选项给用户选择，但又不限制用户的输入内容时，不可以用这个datalist+input的组合来实现了。

7、当我们在输入框里输入内容时，如果和datalist的选项有这些文字的，就会自动弹出下拉来供选择。