I am developing a small application that triggers the following function on a keyup event. The issue I am facing is that if I type quickly, the last key press may not be the latest dataset because the promise removes all previous data from the array and replaces it with the new data.
For example:
Request 1 - 150ms Request 2 - 80ms
In this scenario, Request 1 overwrites all values of Request 2, resulting in outdated data based on the most recent key press.
Does anyone know a solution to this problem? Here is my code below:
Javascript:
app.controller('FlagsController', function ($scope, $http, $location, $window, $timeout) {
$scope.Products = []
$scope.GetRecords = function () {
try {
console.log('Get Records')
// Simple GET request example with promise: To get FeatureRelations
$http({
method: 'GET',
url: 'GetFeatureRelations.ashx?SearchQuery=' + $scope.SearchTerm
}).then(function (res) {
$scope.Products = []
for (var i = 0; i < res.data.length; i++) {
$scope.Products.push(res.data[i])
}
$scope.busy = false
$scope.showLoader = false
}, function (error) {
console.error(JSON.stringify(error))
$scope.busy = false
$scope.showLoader = false
})
}
catch (ex) {
console.error("Error: " + ex.toString())
}
}
})
HTML:
<input type="search" ng-keyup="GetRecords()" class="form-control" style="width: 30%" ng-model="SearchTerm" placeholder="Search Product Code, Name or Brand...">