jquery - AngularJS Instant Search Incredibly Laggy -

jquery - AngularJS Instant Search Incredibly Laggy -

i'm working on database web front-end. having used jquery previous versions of project, i've moved using angularjs "instant-search" feature this:

function searchctrl($scope, $http) { $scope.search = function() { $scope.result = null; $http({method: 'get', url: 'api/items/search/' + $scope.keywords }). success(function(data, status, headers, config) { $scope.result = data; }). error(function(data, status, headers, config) { $scope.status = status; }); }; } ... <div id="searchcontrol" ng-controller="searchctrl"> <form method="get" action="" class="searchform"> <input type="text" id="search" name="search" ng-model="keywords" ng-change="search()"/> <input type="submit" value="search" /> </form> <div ng-model="result"> <a href="javascript:void(0)" ng-repeat="items in result.items" > <div class="card"> <span ng-show="items.id"><b>item id: </b>{{items.id}}<br></span> <span ng-show="items.part_id"><b>part id: </b>{{items.part_id}}<br></span> <span ng-show="items.description"><b>description: </b>{{items.description}}<br></span> <span ng-show="items.manufacturer"><b>manufacturer: </b>{{items.manufacturer}}<br></span> <span ng-show="items.product_range"><b>range: </b>{{items.product_range}}<br></span> <span ng-show="items.borrower"><b>borrower: </b>{{items.borrower}}<br></span> <span ng-show="items.end_date"><b>end date: </b>{{items.end_date}}<br></span> </div> </a> </div> </div> ...

this works great 1 issue: because i'm calling search function on "ng-change" extremely laggy when typing search term, crashing browser. on old version (using jquery) had used flags test if there request running , if there aborted before starting new one. i've looked @ angularjs documentation aborting requests still none wiser. if has got advice on how accomplish or prepare i'd appreciate it.

thanks.

well 1 time request sent, it's sent. afaik, there's not yet way abort processing result of http request native angular. here's feature request labelled "open": https://github.com/angular/angular.js/issues/1159

that said, can abort processing of response this:

class="lang-js prettyprint-override">var currentkey= 0; $scope.test = function (){ $http({ method: 'get', url: 'test.json', key: ++currentkey }) .success(function(data, status, headers, config) { if(config.key == currentkey) { //you're within recent call. $scope.foo = data; } }); };

on flip side of that, i'd recommend implementing timeout of sort on over alter event, maintain beingness "chatty".

jquery ajax search get angularjs