博客

el-autocomplete可以通过设置属性来实现模糊搜索功能。

首先需要设置一个搜索函数，即在输入框输入内容时会调用的函数，用来返回所有符合条件的结果。这个函数需要接收两个参数：输入框的值和一个回调函数。

<el-autocomplete
  v-model="value"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
></el-autocomplete>

然后在Vue实例中定义这个函数，使用一些方法来返回符合条件的结果。

data() {
  return {
    value: '',
    options: [
      { value: 'apple' },
      { value: 'banana' },
      { value: 'orange' },
      { value: 'pear' }
    ]
  }
},
methods: {
  querySearch(queryString, cb) {
     let arr = this.options.filter(option => {
      return option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
     })
     cb(arr)
  }
}

在上述代码中，我们定义了一个options数组，其中包含一些值。在querySearch函数中，我们根据输入框的值过滤options数组，找到所有符合条件的结果。这里使用了toLowerCase()方法来忽略大小写。最终把过滤出的结果传递给回调函数cb。