neridaj neridaj - 1 month ago 32
AngularJS Question

Angular UI Bootstrap Typeahead - No Async Results Displayed

I'm unable to get my asyn response to display in the typeahead dropdown. I previously thought it was due to a slow response but it appear this is not the issue. I'm returning a promise, as described in the docs, and I can see the correct set of data being returned, but the data is not being displayed. If I return some hardcoded data it works, just not with a promise.

controller

function searchAuditLog(searchValue) {
var params = angular.copy(vm.params);
params.campaign_name = searchValue;
var qsParams = $httpParamSerializer(params);
// return [ // This works
// 'DRAFT 1',
// 'DRAFT 2',
// 'DRAFT 3'
// ];
myapi.searchAuditLog(qsParams)
.then(function(results){
return results; // This doesn't
});
}


factory

function searchAuditLog(qs) {
return $http.get(myapi + '/1.0/audit?' + qs)
.then(function(response) {
return response.data.results.map(function(item){
return item.metadata.campaign_name;
});
})
.catch(getFailed)
}


template

<input type="text" ng-model="vm.selectedEvents" placeholder="{{ 'idm.search' | translate }}" class="form-control" uib-typeahead="query for query in vm.searchAuditLog($viewValue)" class="form-control" typeahead-show-hint="true" typeahead-min-length="3" typeahead-on-select="vm.changeSearch($item, $model, $label, $event)" typeahead-no-results="vm.noSearchResults">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>

Answer

Asynchronous typeahead needs promise object to show asynchronous data in options. Your searchAuditLog function from controller should also return a promise so that the data would get populated inside typeahead.

Controller

function searchAuditLog(searchValue) {
    var params = angular.copy(vm.params);
    params.campaign_name = searchValue;
    var qsParams = $httpParamSerializer(params);
    //return promise from here
    return myapi.searchAuditLog(qsParams)
     .then(function(results){
        return results;
     });
}
Comments