My goal is to create a simple debounce function for searching employees. I've noticed that with Chrome DevTools open, the search results consistently come back from the server. However, when Chrome DevTools are closed, there are instances where the breakpoint in the search method on the server isn't hit, indicating that the AJAX call may not be made for some reason.
Unfortunately, the codepen below does not include the part that actually returns the search results.
https://codepen.io/jgunawan-dc/pen/vYLZbEY
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
searchInput: null,
selectedEmployees: null,
isSearchingEmployee: false,
items: [],
},
methods: {
searchEmployees: function (searchInput) {
// cancel pending call
clearTimeout(this._timerId);
this.isSearchingEmployee = true;
// delay new call 1 second
this._timerId = setTimeout(() => {
let _this = this,
url = 'some_url' + '?phrase=' + searchInput;
url = encodeURI(url);
$.ajax({
type: 'GET',
url: url,
success: function (result) {
_this.items.splice(0);
_this.items.push(...result);
},
complete: function (xhr) {
_this.isSearchingEmployee = false;
}
});
}, 1000);
}
},
watch: {
'searchInput': function (newVal) {
this.searchEmployees(newVal);
}
}
})