我目前正在开发一个带有 Web 前端的数据库。在这个项目的以前版本中使用了 jQuery,我现在已经开始使用 AngularJS 来实现“即时搜索”功能,如下所示:
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>
...
这很好用,但有一个问题:因为我在“ng-change”上调用搜索功能,所以在输入搜索词时非常滞后,有时会导致浏览器崩溃。在旧版本(使用 jQuery)上,我使用标志来测试是否有一个 get 请求已经在运行,如果有然后我在开始新的请求之前中止了它。我已经查看了 AngularJS 文档以中止获取请求,但仍然不明智。如果有人对如何实现此或其他修复有任何建议,我将不胜感激。
谢谢。