Using typeahead and ajax in a AngularJS app

Question

I am having issues using Bootstrap-UI's typeahead control with dynamic data (data fetched from ajax call).

The response in my service looks a bit like this [{id:1, text:'somebrand'},{id:2, text:'something'}]

The HTML looks like this:

<input type="text" ng-model="result" min-length="2" typeahead="brand.id as brand.text for brand in brands($viewValue)" style="display:block">

And in my controller I retrieve the content like this:

$scope.brands = function(brandName){
        $http.post('/brands/getbrandsviewmodel', { query : brandName}).then(function(response){
            return limitToFilter(response.data, 15);
        });
    };

The issue I run into is an error in Bootstrap-UI like this:

 Cannot read property 'length' of undefined
at http://localhost:3000/assets/ui-bootstrap-tpls-0.4.0.js?body=1:2749:24

When I debug into the Bootstrap-UI code I see that the error occures here, and that matches is undefined:

//it might happen that several async queries were in progress if a user were typing fast
          //but we are interested only in responses that correspond to the current view value
          if (inputValue === modelCtrl.$viewValue) {
            if (matches.length > 0) {....

My initial reaction is that Bootstrap-UI's typeahead isn't aware when the data is retrieved, but I don't know why, since I am using promises?

pkozlowski.opensource · Accepted Answer · 2013-08-02 21:04:11Z

14

You need to actually return a promise from your brands function. Try this:

$scope.brands = function(brandName){
       return $http.post('/brands/getbrandsviewmodel', { query : brandName})
                     .then(function(response){
                        return limitToFilter(response.data, 15);
                      });
    };

answered Aug 2, 2013 at 21:04

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

Collectives™ on Stack Overflow

Using typeahead and ajax in a AngularJS app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related