Are there any possible ways to search multiple attribute in v-autocomplete in Vuetify?

Question

I have an array of objects bind to item prop of v-autocomplete. this is my data:

products: [
   {
      text: "Apple",
      value: 209
   },
   {
      text: "Banana",
      value: 229
   }
]

<v-autocomplete>
   ...
   :item="products"
   :search-input.sync="search"
</v-autocomplete>

so, i want to have the ability to search by both 'text' and 'value'. Currently, i am able to search only one among them.

Answer 1

Use custom filter function to v-autocomplete as follows

<v-autocomplete>
   ...
   :filter="customFilter"
   :item="products"
   :search-input.sync="search"
</v-autocomplete>

methods: {
     customFilter (item, queryText, itemText) {
         // return true or false according to your logic
         // i.e queryText matches with item object
     },
},

Answer 2

Yes, you can search multiple attribute using filter attribute which is provide in the docs:

  customSearch(item, queryText, itemText) {
      const data = item.text.toLowerCase() + item.value.toLowerCase()
      const searchText = queryText.toLowerCase()

      return textOne.indexOf(searchText) > -1 
  }

and use in the template like this:

 <v-autocomplete
     spellcheck="false" 
     :filter="customSearch"
...
</v-autocomplete>

Refer this docs: https://vuetifyjs.com/en/api/v-autocomplete/#props