时间戳

首页 > 解决方案 > 如何使用 Fuse.js 过滤 vuetify v-autocomplete 组件中的数据？

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

问题描述

我在我的应用程序中使用 vuetify自动完成组件。在这个组件中可以使用自定义过滤器来过滤输入数据。这是自动完成的示例过滤器：

  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
  }

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

我试过什么？

这是我的自定义过滤器

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

这是自动完成组件：

<v-autocomplete
  v-model="model"
  :items="items"
  :loading="loading"
  :search-input.sync="search"
  color="dark"
  hide-no-data
  cache-items
  item-text="name"
  label="Autocomplete"
  placeholder="Search items"
  prepend-icon="mdi-database-search"
  return-object
  :filter="filter"
></v-autocomplete>

当我尝试这个自动完成不会返回 Fuse.js 的过滤结果

标签： javascriptvue.jsvuejs2autocompletevuetify.js

解决方案

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);
    }
  }
}

推荐阅读