“Live search” może być bardzo ciekawym rozwiązaniem w aplikacji. Użytkownik pisze literki w textboxiku i bez wciskania entera czy guzika dostaje przefiltrowane wyniki. Tak jak to znamy z gógla chociażby.
Jeśli jednak reagować będziemy na każdą zmianę, to zanim użytkownik dostanie wynik zapytania “gdzie się podziały pieniądze z OFE” – wykonamy bardzo wiele zapytań. W takich przypadkach warto puszczać faktycznie zapytanie dopiero gdy nasz szukacz zaprzestanie pisania, czyli na przykład nie zmieni żadnej literki przez pół sekundy.
W angularze można to osiągnąć prawdopodobnie na wiele sposobów. Ja sięgnąłem po mechanizm dyrektyw i napisałem swoją, której wykorzystanie w kodzie wygląda tak:
<input obj="myFilter" delay="500" />
A sama dyrektywa:
.directive('delay', ['$timeout', function ($timeout) {
return {
restrict: 'A',
scope: {
obj: '='
},
link: function (scope, element, attrs) {
var delay = attrs.delay;
if (isNaN(parseInt(delay, 10))) {
throw "Delay value in milliseconds must be defined";
}
scope.$watch('obj', function (newValue) {
element.val(newValue);
});
var currentTimeout;
element.keyup(function () {
$timeout.cancel(currentTimeout);
currentTimeout = $timeout(function () {
scope.obj = element.val();
}, delay);
});
}
};
}])
Nice.
