Correct way to program a search text box in angularJs -

Correct way to program a search text box in angularJs -

a mutual feature in several parts of application search box accepts string , filters table based on string.

what aiming ability permit user type in , automatically after few ms of delay results update themselves. i.e no need nail come in button.

ofcourse sorting of info done using angularjs filters. before update filter believe first have understand user has completed entering input , waiting results.

so mapped out directive attached search input box .

<input type="text" update-filter placeholder="enter search term"> //and directive goes app.directive('updatefilter', [ '$timeout', function($timeout){ var delay; homecoming { link: function(scope, element){ element.on('keypress', function(){ if(!delay) { delay = $timeout(function() { //perform activity of updating filter here delay = undefined; },50); } } } } });

my question is, right approach take tackle issue or there improve solutions out there ?

you overcomplicating this. can done much easier in angular.

<input type="text" ng-model="query" ng-model-options="{ debounce: 200 }" ng-change="dosearch()">

use $scope.query access query in controller. define $scope.dosearch() search. debounce alternative used wait 200ms after user done typing.

angularjs