In my application, I am using the Vuetify autocomplete component. This component allows for the use of a custom filter to filter input data. Below is an example of a custom filter for the 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
}
I am now trying to correctly filter an array of objects using the Fuse.js library within the Vuetify autocomplete component.
What I have tried:
Below is my custom filter:
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
}
}
Here is the autocomplete component setup:
<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>
However, when implementing this setup, the autocomplete does not return the filtered results from Fuse.js.