在el-select多选框里面设置input搜索框并能实现搜索功能-一一网

效果：

1、当在输入框里面输入内容时就开始进行筛选，下拉框显示筛选之后的数据

2、当没有符合条件时，显示无数据

3、清空输入框里面的内容后，下拉框显示全部的数据

思路：

1、通过给搜索框设置oninput事件。 oninput ：当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）

2、将输入框内容以及下拉框的数据传递给事件函数

3、根据判断条件，通过filter过滤器筛选符合条件的数据，赋值给新数组，然后将新数组重新赋值给option的遍历数组。

代码实现：

template模板代码里面：


<el-select multiple v-model='selectedArray' value-key="LocationCode" @change='changeSelect' placeholder='请选择' data-live-search="true">
 
   <!-- 因为选定的value值是对象 为了保证唯一 el-select需添加value-key属性且值和option里面的key值一样-->
   <el-input class="search_input" type="text" v-model="searchText" @input="focusCustomer()" clearable placeholder="搜索" ></el-input>
 
   <el-option v-for='item in listt' :key='item.LocationCode' :label='item.LocationName' :value='item'></el-option>
 
</el-select>
复制代码

method方法：


focusCustomer(){
          //     options是后端请求到的数据
	   //         reg ：trim是去除input两边的空格
      var reg = this.searchText.trim()
        //    如果输入框里有value值
      if (reg.length > 0) {
 
         //newArr 是 data中声明的空数组
        this.newArr = this.options.filter(item => {
 
           //    判断输入框的内容在下拉框是否存在
          var numberfliter = (item.LocationName.toUpperCase()).indexOf(reg.toUpperCase())
           //    为0的时候，代表存在，-1为不存在
          if (numberfliter == 0) {
            //    直接返回有相同的给newArr数组
            return item
          }
        })
        //    listt是选项变量的数组
        this.listt= this.newArr
      }else {
        //    如果没有搜索词，就显示所有的数据
        this.listt= this.options
      }
}
复制代码