Angular UI Bootstrap Typeahead - No Async Results Displayed

Question

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>

Pankaj Parkar · Accepted Answer · 2016-11-03 20:53:38Z

4

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;
     });
}

edited Nov 3, 2016 at 20:53

answered Nov 3, 2016 at 20:13

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

neridaj Over a year ago

Damn, missed that one. Thanks!!

Pankaj Parkar Over a year ago

@neridaj that happens, Glad to help you, Thanks :)

Collectives™ on Stack Overflow

Angular UI Bootstrap Typeahead - No Async Results Displayed

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related