Question

我在我的应用中使用了autocomplete组件。在此组件中，可以使用自定义过滤器来过滤输入数据。这是自动完成功能的示例过滤器：

N=3

如何在vuetify自动完成组件中使用Fuse.js库正确过滤对象数组？

我尝试了什么？

这是我的自定义过滤器

  customFilter (item, queryText, itemText) {
    const textOne = item.name.toLowerCase()
    const textTwo = item.abbr.toLowerCase()
    const searchText = queryText.toLowerCase()

    return textOne.indexOf(searchText) > -1 ||
      textTwo.indexOf(searchText) > -1
  }

这是自动填充组件：

filter(item, queryText, itemText) {
  
  let fuseOptions = {
    include: ["score", "matches"],
    shouldSort: true,
    threshold: 0.5,
    location: 0,
    distance: 100,
    maxPatternLength: 32,
    minMatchCharLength: 1,
    keys: [
        "name",
        "description",
        "coordinates"
    ]
  };

  let fuseResults = new Fuse(this.items, fuseOptions).search(
      queryText
  );

  for (var i = fuseResults.length - 1; i >= 0; i--) {
    return fuseResults[i].item.coordinates === item.coordinates
  }
}

当我尝试使用此自动完成功能时，不会返回Fuse.js的过滤结果

Answer 1

为每个单独的项目而不是整个集合调用filter函数。如果要过滤整个集合而不检查单个项目，建议您在查询更改时更改其:items属性的值。

<v-autocomplete
  v-model="model"
  :items="getItems"
  :search-input.sync="searchInput"
  <!-- ... -->
></v-autocomplete>

export default {
  data() {
    return {
      searchInput: ""
    }
  }
  computed: {
    getItems() {
      let fuseOptions = {
        include: ["score", "matches"],
        shouldSort: true,
        threshold: 0.5,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: [
          "name",
          "description",
          "coordinates"
        ]
      };
      return new Fuse(this.items, fuseOptions).search(this.searchInput);
    }
  }
}

如何使用Fuse.js过滤vuetify v-autocomplete组件中的数据？

1 个答案: