CSS select 可输入可选择（输入关键字自动关联下拉框选项）实现方法整理

**

方法一：使用dataList标签。

**

<input id="fruit" name="aaa" list="fruitlist" style="height:29px;border:1px solid #DEE1E7;border-radius:3px;"/>
<datalist id="fruitlist" cssClass="border-color:grey;">
      <option value="">请选择</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
</datalist>

注：
1. 对浏览器的要求略高，或许支持IE10包括ie10以上版本。chorme、firefox均可用。
2. 文本框的样式可忽略，自行设定。

方法二：使用ElementUI组件。

<div style="display:block;width:70%;margin-left:10%;position:relative;">
           <span><span style="color:red;font-size:18px;">*&nbsp;</span>水果&nbsp;</span>&nbsp;
           <template>
       <el-select v-model="value" filterable placeholder="请选择或输入水果" style="height:10%;">
         <el-option v-for="item in fruitlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
       </el-select>
     </template>
</div>
<script>
var Main = { 
  data() { 
    return {
      value :'', //因为v-model="value"，所以此处一定要给一个声明，否则报错。
      fruitlist:[{label:'苹果',value:'apple'},{label:'香蕉',value:'banana'}]
      
  }
}
var app = new Vue(Main).$mount('#span10')

</script> 

注：
1.需要引入elementUI的各种文件，我使用的是离线的。

<link rel="stylesheet" href="elementUi/elementUI.index.css">
<script src="elementUi/elementUI.index.js"></script>

为了显示箭头icon，我们还需要有下面两个文件。（具体下载方式上一篇博客有记录哦）
https://blog.csdn.net/qq_35976548/article/details/106497751

2.样式可忽略，自行设定。

**区别：**第二种方法不适用于输入的内容是下拉框里没有的。假如输入“葡萄”，此控件在失去焦点以后会清空输入的内容。