user911 user911 - 1 month ago 5
AngularJS Question

Search box in angular js

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

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