CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
uylmz
uylmz

Reputation: 1552

AngularJS ui bootstrap typeahead never shows results

My html code is:

<p>
    <input type="text" ng-model="destination" placeholder="Destination"
        uib-typeahead="dest as dest.name for dest in getDestinations($viewValue)" typeahead-loading="loadingDestinations"
        typeahead-no-results="noResults" typeahead-min-length="3">

    <i ng-show="loadingDestinations">...</i>

    <div ng-show="noResults">
        <i>xxx - </i> No Destinations Found
    </div>
</p>

And my getDestinations() function, which returns a HttpPromise:

$scope.getDestinations = function(viewValue) {
    console.log(viewValue);
    return $http.get('/api/destAutoComplete', {
        params : {
            prefix: viewValue,
            countryId: 94
        }
    });
}

Which returns a response for the input "ist" from the server:

[
{
"name": "Costa del Sol / Istan",
"cityId": 5452,
"locationId": 30083
},
{
"name": "Istanbul",
"cityId": 1122,
"locationId": null
}
]

As you see server returns correctly filtered result as a json array, but typeahead never shows results and always says "No Destinations Found". What am I doing wrong? I am trying to show "name" as label in typeahead dropdown, and set the whole dest object to destination in scope, when one is selected.

Upvotes: 0

Views: 527

Answers (1)

codeandcloud
codeandcloud

Reputation: 55200

This is because you forgot to return your promise object. According to Angular Bootsrap UI code comment,

Any function returning a promise object can be used to load values asynchronously.

Try this

$scope.getDestinations = function(viewValue) {
    console.log(viewValue);
    return $http.get('/api/destAutoComplete', {
        params: {
            prefix: viewValue,
            countryId: 94
        }
    }).then(function(response) {
        // or whatever response you are getting
        return response.data.results;
    });;
}

Plunker: http://plnkr.co/edit/rIsiEjDBajZb0JPaNjZB?p=preview

Upvotes: 1

Related Questions