vue中使用element ui的input做模糊查询的爬坑记录（二）

本文链接：https://blog.youkuaiyun.com/qq_41949807/article/details/112588462

博主此前介绍input模糊查询中v-for生成多组件传index问题，解决部分问题后仍有bug。官网示例虽实现模糊查询，但只能按文字顺序搜索，未达真正模糊查询效果。博主指出需改造方法，实现有相关内容就查询，还邀大家分享使用Element UI的困惑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在之前的那篇博客中我介绍了input做模糊查询的时候出现由v-for生成多个组件的时候怎样传index的问题。解决了大部分问题但是在是用的时候还是出现了其他bug所以在这里在记录下

官网给出的例子是这样的：

在template里面：

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

在data中

data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null
      };
    },

在methods中

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()) === 0
        )
      }
    },
    handleSelect (item) {
      console.log(item)
    },

具体的可以在elementui官网查看

官网这样我们看着实现了模糊查询但是呢，只能按照搜索内容的文字顺序搜索。没有真正意义上做到模糊查询。仔细看过方法后是createStateFilter()这个方法里的state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0需要改造下改为state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1因为这个方法里的indexOf() === 0这块是下标等于0，而我们是要做真正的模糊查询所以我们需要改为indexOf() !== -1什么意思呢？就是有，存在的时候就查询。