Handle multiple Ajax calls in search functionality in angular js - php

Question

I have implemented custom search functionality for my angular js application.
For that I called an Ajax request to fetch the data.
This call happens on change event and that is why it calls my Ajax multiple times.
Please suggest as I am new in angular js.

Answer 1

You can use delay(idle time) into consideration. Like suppose I am typing in search text box If I am idle for 200ms, 400ms or whatever time you want, You can call an AJAX request.
If I type salman it will call api for 6 times. but suppose we will have idle time. we will call when user idle for that specific time.
To implement it in angular, you can use. $watch or bootstrap directives

Answer 2

So your best bet is to give yourself a bit of delay. As noted by Akash, you have to choose the delay time you find acceptable. You also need to make sure that the request is only made after the delay.
Here is one way to do it:
//In your controller
var _timeout;
$scope.fetchSearchResults = function(){
//We will clear the previous timeout because a key has been pressed
clearTimeout(_timeout);
//Set the timeout - if no key is pressed, it will execute. Else the line above will clear it.
_timeout = setTimeout(function(){
var keyword = $scope.searchKeyword.name;
//Do your AJAX request here
//We have delayed the request by 400ms - but you can change it as you please.
}, 400);
}
Your HTML:
<!-- Then in your HTML something similar to: -->
<input ng-model="searchKeyword.name" ng-keyup="fetchSearchResults()" />
Edit:
If you want to go the 'pure' angular way, you'd do it like this:
//In your controller
//NOTE: make sure you've injected $timeout into your controller
var _timeout;
$scope.fetchSearchResults = function(){
//We will clear the previous timeout because a key has been pressed
$timeout.cancel(_timeout);
//Set the timeout - if no key is pressed, it will execute. Else the line above will clear it.
_timeout = $timeout(function(){
var keyword = $scope.searchKeyword.name;
//Do your AJAX request here
//We have delayed the request by 400ms - but you can change it as you please.
}, 400);
}

Answer 3

I definitely recommend #jeanpaul's answer for "debouncing".
In addition to that, when you have potential for multiple concurrent AJAX requests and you want to handle the most recent one, it can be necessary to verify which request it is in your response handler. This is especially important when the responses don't always come in the same order they were requested (ie. an earlier request takes longer to respond than a later one)
A way to solve this is something like:
var activeRequest;
function doRequest(params){
// reqId is the id for the request being made in this function call
var reqId = angular.toJson(params); // I usually md5 hash this
// activeRequest will always be the last reqId sent out
activeRequest = reqId;
$http.get('/api/something', {data: params})
.then(function(res){
if(activeRequest == reqId){
// this is the response for last request
}
else {
// response from previous request (typically gets ignored)
}
});
}

Answer 4

You already accepted the answer but I want to share some code with you.
myapp.factory('formService', ['$http', '$filter', '$q', '$timeout', function ($http, $filter, $q, $timeout) {
var service = {};
service.delayPromise = null;
service.canceler = null;
service.processForm = function (url, formData, delay) {
if (service.delayPromise)
$timeout.cancel(service.delayPromise);
if (service.canceler)
service.canceler.resolve();
service.canceler = $q.defer();
service.delayPromise = $timeout(function (service) {
return service;
}, delay, true, service);
return service.delayPromise.then(function (service) {
service.delayPromise = null;
return $http({
method : 'POST',
url : url,
timeout : service.canceler.promise,
data : formData
});
})
}
return service;
]);
What does this do. It provides formService having processForm function, with accepts url, formData and delay.
processForm function delays submitting with $timeout service. If there are already exist delayed or pending submission it just cancels it.
And in your controller.
myapp.controller('myCtrl', ['formService', function (formService) {
$scope.formData = {};
$scope.pageData = {};
$scope.$watchCollection('formData', function (formData, oldData, scope) {
if (!angular.equals(formData, oldData)) {
var event;
formService.processForm(formData, event, 500).then(function (response) {
if (response.data instanceof Object)
angular.copy(response.data, scope.pageData);
});
}
});
}]);