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

效果:

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

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

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

思路:

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

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

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

代码实现:

template模板代码里面:



   
   

   

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
      }
},

 

你可能感兴趣的:(前端,vue,vue,filter)