Nasıl AngularJS üzerinde bir gecikme Anında Arama koymak?
AngularJS yeni duyuyorum, ve adres gibi görünmüyorum bu bir performans sorunu var. Her keyup arama başladığı için hızlı arama var ama biraz kart her ikisi de, ().
JS:
var App = angular.module('App', []);
App.controller('DisplayController', function($scope, $http) {
$http.get('data.json').then(function(result){
$scope.entries = result.data;
});
});
HTML:
<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:searchText">
<span>{{entry.content}}</span>
</div>
JSON veri olmasa bile büyük, 300 KB sadece, sanırım ihtiyacım olan şey gerçekleştirmek için bir gecikme ~1 sn aramak için beklemek için kullanıcı için son yazmak yerine, sahne eylem, her tuş vuruşu. AngularJS bu içten ve burada dokümanlar ve diğer konuları okuduktan sonra, belirli bir cevap bulamadım.
Anında Arama gecikme ben nasıl herhangi bir işaretçiler takdir ediyorum. Teşekkürler.
CEVAP
GÜNCELLEME
Şimdi her zamankinden daha kolay (Açısal 1.3), sadece model üzerinde debounce bir seçenek ekleyin.
<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">
Güncelleştirilmiş plunker:
http://plnkr.co/edit/4V13gK
NgModelOptions belgeler:
https://docs.angularjs.org/api/ng/directive/ngModelOptions
Eski yöntem:
İşte kendisi açısal dışında hiçbir bağımlılıkları ile başka bir yöntem.
Bir zaman aşımı ayarlayın ve son sürümü ile geçerli dize karşılaştırmak gerekir, eğer ikisi de aynı ise o zaman arama yapar.
$scope.$watch('searchStr', function (tmpStr)
{
if (!tmpStr || tmpStr.length == 0)
return 0;
setTimeout(function() {
// if searchStr is still the same..
// go ahead and retrieve the data
if (tmpStr === $scope.searchStr)
{
$http.get('//echo.jsontest.com/res/' tmpStr).success(function(data) {
// update the textarea
$scope.responseData = data.res;
});
}
}, 1000);
});
ve bu sana ters gider:
<input type="text" data-ng-model="searchStr">
<textarea> {{responseData}} </textarea>
Zorunlu plunker: http://plnkr.co/dAPmwf
Nasıl arama motorları AngularJS uygula...
Nasıl çalışır Eclipse üzerinde yapışka...
Nasıl olursa katılımcı / sahibi değils...
Nasıl gerçek zamanlı bir arama gerçekl...
Nasıl WPF benim ızgara üzerinde bir sı...