Как фильтровать данные в компоненте vuetify v-autocomplete с помощью Fuse. js? - PullRequest
Новая
       28

Как фильтровать данные в компоненте vuetify v-autocomplete с помощью Fuse. js?

1 голос
/ 09 июля 2020

Я использую в своем приложении компонент vuetify autocomplete . В этом компоненте можно использовать настраиваемый фильтр для фильтрации входных данных. Вот пример фильтра для автозаполнения: 

  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
  }

Как правильно отфильтровать массив объектов usng Fuse. js библиотека в компоненте автозаполнения vuetify?

Что я пробовал?

Вот мой пользовательский фильтр 

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

1 Ответ

1 голос
/ 09 июля 2020

Функция 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);
    }
  }
}
...