Web前端—既可以输入又可以选择的input框

又是一周，以前总说码农码农现在才理解为什么这个职业刚开始就是搬砖的了

废话就到此为止

今天给大家说一下如何利用HTML5特性写一个既可以输入又可以选择的输入框

其实在HTML5中，有这样一个属性的Input框 叫做 Datalist

顾名思义就是利用已有的Data为用户提供选择项

具体代码如下

<input list="companys"/>
<datalist id="companys">
  <option value="Apple">
  <option value="Microsoft">
  <option value="Github">
</datalist>

PS:这里的list一定要跟Datalist id 一致哦 
这段代码实现了下列效果如图：

还可以实现自动补全功能哦.

 作者用这种方法替代了JQuery的Autocomplete功能但是不建议这么做因为机制不同

php渲染页面需要很长时间 对于大数据量的还是建议autocomplete哈，如果有更好的方法

欢迎留言

对于后端来说这里笔者以PHP 举例 

只遍历数据 逐一赋值给<option value>即可

但还是那句话：少量数据建议这么做

具体代码给个Demo吧

简单实用的小技巧分享给大家把 

还是那句话 希望能帮到大家

PS 本人就是一只菜鸡 所以慢慢提升技术含量再给大家写深度好文吧 

哈哈哈