CODEWITHSUNDEEP
angularjs
Rod0n
Rod0n

Reputation: 1079

Performing backend search

I'm building an angularjs app to list several items so I'm trying to add search functionality.

I've an flask app that exposes a REST service using ElasticSearch for full text search(/bids/search/:term). So in angularjs I can get all items doing something like:

bidsServices.factory('Bid', ['$resource',
  function($resource){
    return $resource('http://127.0.0.1:5000/bids/search/:term', {}, {
      query: {method:'GET', params: {term: 'all'}, isArray:false}
    });
  }]);

But what I'd really like to do is to dynamically call/retrieve the query results as the user inserts the desired term. I'm a begginer at Angular and I'm pretty lost about how to solve this problem.

Upvotes: 1

Views: 1609

Answers (2)

David Losert
David Losert

Reputation: 4802

You need to set up a model onto the textfield the user put´s his query like so:

<input type="text" ng-model="myController.myTextInput" />

Then there is two options: Either you use the ng-change directive also on that input field and provide it with a function from your controller that makes the ajax call to your backend:

<input type="text" ng-model="myController.myTextInput" ng-change="callBackend()"/>

and inside the Controller:

$scope.callBackend = function() {
 // Make the AJAX Call here and populate the results back to the scope
}

Or, inside your controller, set up a watcher with $scope.$watch where you listen on changes to the model and react again by calling your backend:

$scope.$watch('myTextInput', function() {
 // Make the AJAX Call here and populate the results back to the scope
}

While the first option is better for your overall performance, the second option gives you the advantage that you can also change the query from you business-logic - it will still execute the watchers function.

Upvotes: 2

reptilicus
reptilicus

Reputation: 10397

It sounds like you are looking for typeahead. Check out the angular-ui/bootstrap implementation. It works pretty well, and there is a nice example of it here.

Upvotes: 1

Related Questions