[JavaScript知识库]elementui input输入框实现模糊查询(中间踩了两个坑)

实现这个功能，在网上找了很多感觉都不太准确，残缺不全，这里做个总结

完整代码

           <el-autocomplete
				  v-model="state"
				  :fetch-suggestions="querySearchAsync"
				  placeholder="请输入内容"
				  @select="handleSelect">
			</el-autocomplete>

<script>
export default {
  data() {
    return {
		restaurants: [],//后端获取的数据  
        state: '', //输入框输入的双向绑定的数据
}
}
mounted() {
this.loadAll()
},
methods: {
	//获取后端数据的接口
    loadAll() {
        let that = this
        that.$axios.get(that.baseURL+'PROD/testdialog/documents/')
        .then(function(res){
          if (res.data.code===1){
            that.restaurants = res.data.data
            // console.log(res.data.data)
          }else{
            // 失败的提示
            that.$message.error(res.data.msg)
          }
        })
        .catch(function(err){
          console.log(err)
        })
      },

 	querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        cb(results);
        
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect(item) {
        console.log(item);
      },

}
</script>

这里要强调两点：
(1)

createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },


return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1); 
//这里大于-1可以实现模糊查询，比如你输入 git 那么git getgit  gitout都可以查询到
//如果你这里是 return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0);
//当你输入 git 那么只能显示git  gitout 而getgit查询不到 只能以要搜寻的条件为开头

(2)

createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };

//这里的value要和你后端返回的key对应，也就是说你后端返回的数据的key要是value，不要随便改一个，前端会拿不到数据，至于为什么我也不清楚，反正可以实现