Search box in angular js

Question

I want to implement a search box in my angularJs application. As soon as user starts typing some name in the search box , some REST service should be called and it should fetch all the names which matches the name typed in the search text box. Note that there is no button , the result should come automatically as soon as user starts typing. The REST service is already there. I just need to invoke the REST service when the user starts typing and return the result as a list. For ex:- If I type James then all the user whose name starts with James should come as a list in the search box.

Once the list of name comes , the user can click on one of the name and his information should be loaded in the current page.

How can I implement such type-on search box in angular js? Is there any directive for it? Can anyone please give me some direction.

Answer 1

You should define a directive that listen onkeypress.

app.directive('myOnKeyDownCall', function () {     return function (scope, element, attrs) {         element.bind("keydown keypress", function (event) {                             scope.$apply(function (){                     scope.$eval(attrs.ngEnter);                 });                 event.preventDefault();         });     }; }); 

HTML

 <input type="text" my-on-key-down-call="callRestService()">    

CONTROLLER

$scope.callRestService= function() {   $http({method: 'GET', url: '/someUrl'}).     success(function(data, status, headers, config) {          $scope.results.push(data);  //retrieve results and add to existing results     }) } 

Would be nice to wait until 3 keys has been typed, for that in directive:

var numKeysPress=0; element.bind("keydown keypress", function (event) {             numKeysPress++;              if(numKeysPress>=3){                 scope.$apply(function (){                     scope.$eval(attrs.myOnKeyDownCall);                 });                 event.preventDefault();               }         }); 

Perhaps, exists typeahead directive from angular-ui that you can use: angular-ui typeahead I hope it helps you

Answer 2

Found this to be a simplification of the accepted answer.

// Directive app.directive('search', function () {     return function ($scope, element) {         element.bind("keyup", function (event) {           var val = element.val();           if(val.length > 2) {             $scope.search(val);           }         });     }; });  // In Controller $scope.search= function(val) {   // fetch data }  // HTML <input type="text" search>