You can use the debounce function for type-ahead search results. When a user begins to type a keyword to search for, requests are sent automatically after the third character is entered. As the user types keywords, more requests are sent. This can lead to a potentially high number of unnecessary requests.
For example, if the final keyword that the user enters is jackets, then jac, jack, jacke, and jacket would all be requested before the user finished typing, but results are not needed for those entries. So in a case like this, you want to debounce the calls by waiting until the user has finished typing (or, at least, waiting a short delay) and then search using the final keyword they entered.
By default, the debounce function blocks the first and all succeeding calls until they stop, and then calls using the most recent request. This technique is a good fit for API calls because you typically only want one call to go through, and for that call to contain the user-submitted data from the most recent request.
To use debouncing, follow this syntax:
_.debounce(function, wait, [immediate])
Copy
The immediate parameter is optional, but if you specify true for this parameter, the debounce function passes the first call and blocks all subsequent calls. The immediate parameter works well for use cases like Submit buttons.
Example:
searchPONumber: _.debounce(function (e) {
this.searchByPO(e);
}, 1000),
searchByPO: function (e) {
var self = this;
if (_.isEmpty(self.searchCollection)) {
self.searchCollection = self.collection.models;
}
var InputSearchNumber = e.target.value;
this.inputFilter = InputSearchNumber;
this.collection.models = _.filter(self.searchCollection, function (searchModel) {
return ((searchModel.otherrefnum).includes(InputSearchNumber) || (searchModel.tranid).includes(InputSearchNumber))
})
this.render();
},
In the above example the function searchByPO() will work after a small delay. In the “type-ahead search” function, the debounce is using.