AngularJS BootstrapUI Typeahead with object - Service not called

Question

I'm having a problem with typeahead. I want to fetch a list of Account objects with my service class when user types some input. I need to store the Id of account object to use it in a different operation.
I've seen a lot of questions answered on this and I tried to apply the solutions but my service call doesn't even get triggered. As if the input had no functions supplied. Could someone point me what ridiculous mistake I'm making.
Ta

    var myCtrl = angular.module('myControllers', ['myApp.myServices', 'ui.bootstrap'])
.controller('myController', function ($scope, $q, $filter, myService) {
    $scope.selectedAccount = undefined;
    $scope.loadingAccounts =false;
    $scope.getAccounts = function(viewVal){
            $scope.loadingAccounts = true;
            console.log('I wish I saw this in logs : getAccounts for search terms '+ viewVal);
            myService.searchAccounts(viewVal)
            .then( 
                function (accountsList) {
                       $scope.loadingAccounts = false;
                       return accountsList;
                },
                function (errorMessage) {
                      $scope.loadingAccounts = false;
                }
            );
    };

}

And the page

<input type="text" id="customer" placeholder="Search Accounts" 
                     ng-model="selectedAccount" typeahead-min-length="2" typeahead-wait-ms="300"
                    typeahead="account as account.Name for account in getAccounts($viewValue)" />
                    <i ng-show="loadingAccounts" class="glyphicon glyphicon-refresh"></i>

links I researched link 1
example jsfiddle
a blog with delay attribute used
example plunker

JeffryHouser · Accepted Answer · 2016-05-22 12:20:29Z

0

The getAccounts() function doesn't return anything; only the embedded function from the service call does, so I wouldn't expect the typeahead attribute to ever have anything to loop over. I'm guessing a bit, but first I'd add an accountsList variable:

$scope.accountsList = [];

Then modify your services result function to save the accountsList into the $scope variable:

function (accountsList) {
    $scope.loadingAccounts = false;
    $scope.accountsList = accountsList;
},

In the input, be sure to loop over the accountsList; not the function call:

typeahead="account as account.Name for account in accountsList" />

And I suspect you'll want to trigger the service call using some type of change event on the input:

ng-change="getAccounts($viewValue)"

Edit: After a quick review of the docs for the current version of UI Bootstrap, you may be okay just returning a promise object from the getAccounts function:

$scope.getAccounts = function(viewVal){
            $scope.loadingAccounts = true;
            console.log('I wish I saw this in logs : getAccounts for search terms '+ viewVal);
                // add a return statement here
                return myService.searchAccounts(viewVal)
                .then( 
                    function (accountsList) {
                           $scope.loadingAccounts = false;
                           return accountsList;
                    },
                    function (errorMessage) {
                          $scope.loadingAccounts = false;
                    }
                );
        };

answered May 22, 2016 at 12:20

JeffryHouser

39.4k4 gold badges41 silver badges60 bronze badges

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

3 Comments

user682217 Over a year ago

I thought about using an array The problem however is that the event doesn't fire. I don't think using ng-change was designed for this purpose. All examples work without it. It somehow defeats the point of delay. One doesn't want to fire the service on every key stroke put probably after a suer types a few more letters.

JeffryHouser Over a year ago

@user682217 Did you see the second half of my post? Does it have an affect?

user682217 Over a year ago

no I even removed typeahead-min-length but I can't get the widget to fire the event unless used with ng-change

user682217 · Accepted Answer · 2016-05-23 16:15:30Z

0

silly me uib-typeahead instead of typeahead= did the trick :-)

answered May 23, 2016 at 16:15

user682217

2914 silver badges16 bronze badges

2 Comments

Thomas G Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review

user682217 Over a year ago

well it did provide not only answer but the solution.

Collectives™ on Stack Overflow

AngularJS BootstrapUI Typeahead with object - Service not called

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related