利用HTML5 的Datalist 元素实现输入提示

HTML5有无限可能，总是在释出一些新鲜实用的功能，让原生的web环境更加炫酷。
今天看到datalist这个元素，可以用来预先定义一个输入框的潜在选项，也就是我们在平时项目中经常用jQuery插件或者自己写JS来实现的autocomplete「自动补全，但似乎自动提示更贴切一些」功能。
废话不多说直接上代码：

Paste_Image.png

大家可以根据我的代码去浏览器里去运行一下！
但相信大家在看了效果后跟我一样，发现了一个不足之处，在input右边会有向下的箭头，这让它看起来就像一个dropdown或者select「下拉框」，解决办法是多加两句CSS代码来将它隐藏，但此方法只是针对webkit内核的浏览器进行的优化：
input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none;}
当然细心的童鞋可能发现了加的浏览器前缀是webkit所以说现在这个css属性只有webkit浏览器支持的比较好，其他的浏览器大家可以去看一下有没有更好的方法去解决。如果不能解决的话只能说去降低用户体验了。