Vuetify v-autocomplete object custom filter

Question

Using vuetify v-autocomplete with an object, the object is a Key and Value. When the user search, the search is based on the item-text. As you can see in my example I display the object Key and Value Example {1200-Chloride Systems}. So is it possible that when the user type the search is based on both the Key and Value of the object and not just the item-text?

                <v-autocomplete
                  label="Trading Partner"
                  v-model="tradingPartner"
                  :items="tradingpartners"
                  item-value="Key"
                  item-text="Value"
                  return-object
                >
                  <template slot="selection" slot-scope="{ item }">
                    {{ item.Key }} - {{ item.Value }}
                  </template>
                  <template slot="item" slot-scope="{ item }">
                    {{ item.Key }} - {{ item.Value }}
                  </template>
                </v-autocomplete>

in the example below, you can see that 1200 is the key and Chloride Systems is the value. The display is concatenating Key - Value. If I clear the text and start typing I can search for the Name (Value), but if I type as example 1200 it finds nothing because the search is not on Key.

Boussadjra Brahim · Accepted Answer · 2021-06-28 08:59:52Z

6

You could use custom filter prop which takes a function as value :

<v-autocomplete :filter="onFilter" ...

in methods:

methods:{
   onFilter(item, queryText, itemText){
        return item.Key.toLocaleLowerCase().includes(queryText.toLocaleLowerCase())
               ||  item.Value.toLocaleLowerCase().includes(queryText.toLocaleLowerCase())

   }
}

answered Jun 28, 2021 at 8:59

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuetify v-autocomplete object custom filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related