J'utilise Vuetify Autocomplete avec des données distantes et je voudrais limiter/rebondir les appels d'API (attendez 500 ms pour appeler l'API lorsque l'utilisateur tape du texte dans la saisie semi-automatique). Comment puis je faire ça?
J'ai vu un article Stack OverFlow sur le debounce-search
, mais cela n'a pas fonctionné pour moi, et je n'ai vu aucune documentation Vuetify sur cet attribut.
Vous pouvez ajouter un anti-rebond à la fonction qui effectue les appels d'API. Un anti-rebond pourrait être implémenté avec setTimeout
et clearTimeout
, de sorte que les nouveaux appels soient retardés et annule tout appel en attente:
methods: {
fetchEntriesDebounced() {
// cancel pending call
clearTimeout(this._timerId)
// delay new call 500ms
this._timerId = setTimeout(() => {
this.fetch()
}, 500)
}
}
Une telle méthode pourrait être liée à un observateur sur le search-input
accessoire de v-autocomplete
:
<template>
<v-autocomplete :search-input.sync="search" />
</template>
<script>
export default {
data() {
return {
search: null
}
},
watch: {
search (val) {
if (!val) {
return
}
this.fetchEntriesDebounced()
}
},
methods: { /* ... */ }
}
</script>
Merci beaucoup. Ça marche. Voici mon code (pour géocoder une adresse):
<v-autocomplete
ref="refCombobox"
v-model="adresseSelectionnee"
:items="items"
:loading="isLoading"
:search-input.sync="search"
no-filter
hide-details
hide-selected
item-text="full"
item-value="address"
placeholder="Où ?"
append-icon="search"
return-object
dense
solo
class="caption"
clearable
hide-no-data
></v-autocomplete>
watch: {
search(val) {
if (!val) {
return;
}
this.geocodeGoogle(val);
}
},
methods: {
geocodeGoogle(val) {
// cancel pending call
clearTimeout(this._timerId);
this.isLoading = true;
// delay new call 500ms
this._timerId = setTimeout(() => {
const geocoder = new this.$google.maps.Geocoder();
geocoder.geocode({ address: val, region: "FR" }, (results, status) => {
if (status === "OK") {
this.adressesGoogle = results;
this.isLoading = false;
} else {
this.isLoading = false;
}
});
}, 500);
},