el-select element 可自定义输入的可搜索下拉框

描述: 用户可自定义输入要查询的文件格式，也可根据下拉列表选择文件格式，并且在用户输入的同时，具有搜索功能。

实现步骤：

1.使用element-ui组件的 el-select标签  并且配置上filterable 可搜索属性

<el-select
     filterable
     clearable 
     placeholder="请选择文件格式"
     v-model="searchForm.fileExt"
     class="search-input"
     size="small"
      @change.native="selectBlur" //添加change事件以防万一
       @blur.native="selectBlur"  //失焦事件（必须）
      >
        <el-option
        :value="item.key"
         :label="item.value"
         v-for="(item, index) in fileFormatArr"
         :key="index"
         ></el-option>
</el-select>

2.给el-select标签手动绑定blur事件，并且手动赋值给el-select标签的v-model

selectBlur(e) {
      this.searchForm.fileExt = e.target.value
    },

3.在此处有个bug，如果浏览器有点小卡的话，会出现手动输入的值绑定不上el-select  v-model的现象，因为没有可配置项，失焦或者重新聚焦（点击）的时候会自动清除v-model绑定的数据。所以需要将绑定事件“@blur”后面加上“.native”；完美解决。

注意：如果以上两种方法都无法解决  或者不能满足项目需求，那么请在el-select 组件中  加入filter-method属性，可以即时获取当前变化的值，效果参考原生change 事件，但是这样会破坏默认的模糊搜索功能，需要手动自己添加搜索规则。

如（未添加规则）：

filterData(e) { //值改变判断
      this.searchData = e
      if (e != this.historyVal) {
        this.key = true
      }
    },

 

4.如需要在下拉选项中创建自定义输入值的选项，需要在el-select标签上添加属性allow-create，以允许允许用户创建新条目。

效果如图（非创建新条目）：