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.

angular-ui.github.io/bootstrap/#/typeahead

John Ledbetter
– John Ledbetter

2014-02-19 20:28:40 +00:00
Commented Feb 19, 2014 at 20:28 — John Ledbetter
– John Ledbetter, Commented Feb 19, 2014 at 20:28

Jorge Guerola · Accepted Answer · 2015-06-24 07:33:53Z

31

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

edited Jun 24, 2015 at 7:33

answered Feb 19, 2014 at 20:30

Jorge Guerola

2,0821 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user911 Over a year ago

I found the typehead link very useful. Thanks @Jorge!!

Alwyn Over a year ago

scope.$eval(attrs.ngEnter); <-- Does not make sense. Did you mean "attrs.myOnKeyDownCall" ?

Ignacio Ruiz Over a year ago

Just a little improvement for the matter of the future readers. The numKeyPress logic makes that if the user presses three times, for example, the "Ctrl" key, the REST service is called, instead I would propose: if(element.val().length >= 3) {/*eval stuff*/}

gabbler Over a year ago

event.preventDefault() prevent character user input from showing.

Alexander Gorelik Over a year ago

grabber You probably misspelled directive name

Ryan Charmley · Accepted Answer · 2016-01-14 23:04:07Z

5

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>

answered Jan 14, 2016 at 23:04

Ryan Charmley

1,13715 silver badges18 bronze badges

Comments

Soubriquet · Accepted Answer · 2014-06-20 03:59:21Z

4

Not sure if you already solved this, but I recommend looking at this tutorial: http://angular.github.io/angular-phonecat/step-12/app/#/phones Essentially it does what you're interested in, but instead it filters out the results while typing. If you got this working, I'm interested in how you did it. I'm trying this as well.

answered Jun 20, 2014 at 3:59

Soubriquet

3,39010 gold badges43 silver badges52 bronze badges

Comments

Marko · Accepted Answer · 2017-05-25 01:34:12Z

4

Why so much drama, directives, and Glyptodon blood?

Since angular already has

ng-keypress
ng-keyup
ng-keydown

Use any of those to invoke REST service just as you would with ng-click.

HTML

<input type="search" ng-model="vm.query" ng-keyup="vm.search()" />

JS

vm.search = search;

function search() {
  // Call your cool REST service and attach data to it
  vm.data = MyCoolService.myGetFunctionWhatever();
  // You can use vm.query ng-model to limit search after 2 input values for example
  //     if(vm.query.length > 2) do your magic
};

answered May 25, 2017 at 1:34

Marko

9579 silver badges14 bronze badges

Comments

Thomas David Kehoe · Accepted Answer · 2017-01-24 20:23:06Z

2

Bootstrap's "Typeahead, Asynchronous results" does exactly what you want, easily. Go to https://angular-ui.github.io/bootstrap/ then scroll down near to the bottom of the page. I used it in my CRUDiest movies database project: https://crudiest-firebase.firebaseapp.com/#/movies

answered Jan 24, 2017 at 20:23

Thomas David Kehoe

11k18 gold badges77 silver badges124 bronze badges

Collectives™ on Stack Overflow

Search box in angular js

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related