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 举例

image

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

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