How to debounce v-autocomplete filter function in Vuetify?

Asked Jan 20 '20 at 11:54

Active Jan 20 '20 at 15:59

Viewed 1,267 times

I have a v-autocomplete with 9000 items.

The component code looks like below:

<v-autocomplete
  v-model="form.fields.city_id"
  :items="cities_subregions"
  item-text="name"
  item-value="id"
  :filter="locationsFilter"
></v-autocomplete>

In the locationsFilter function I have the below:

locationsFilter (item, queryText, itemText) {
    const textOne = item.city_name.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase();
    const searchText = queryText.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase();
    return textOne.startsWith(searchText) || searchText.length > 2  && textOne.indexOf(searchText) > -1 && textOne.length/(3*textOne.split(' ').length) < searchText.length;
},

Even if a set a return null to that function, when the user types it will be laggy.

Therefore, I would like the filter locationsFilter to be called once each ~250ms.

Is there a way to achieve this?

edited Jan 20 '20 at 15:59

Daniel

34,125
17
102
150

asked Jan 20 '20 at 11:54

Inigo EC

2,178
3
22
31

This may solve your issue : https://stackoverflow.com/questions/56821337/vuetify-throttle-debounce-v-autocomplete – Franck CHEN Jan 22 '20 at 08:29
That's using an API, but I want it to apply it to the filter property which works with local data – Inigo EC Jan 23 '20 at 10:08

How to debounce v-autocomplete filter function in Vuetify?

0 Answers0