Angular-UI typeahead Ergebnisse nicht im Dropdown angezeigt

Question

Im mit Angular-Ui Typahead-Komponente, um eine Autovervollständigung API zu treffen, und ich analysiere die Daten, die ich zurück in ein Array namens resp. Die Daten werden jedoch nicht an die Dropdown-Liste für die automatische Vervollständigung in der Benutzeroberfläche weitergeleitet. BTW, der Controller hat eine console.log, die die Daten korrekt anzeigt, so dass ich weiß, dass es aus dem API-Anruf zurückkehrt.

Hier ist meine Controller-Funktion:

$scope.getLocationForSearch = function(locationString){ 

    $scope.locationString = locationString; 
    var url = '/autoComplete/' + locationString ; 
    $http({ 
     method: 'GET', 
     url: url    
    }).then(function successCallback(response) { 
     console.clear(); 
     var resp = response.data.RESULTS.map(function(item){ 
      console.log(item.name); 
      return item.name; 
     }); 

     return resp; 

     }, function errorCallback(response) { 
     console.log(response); 
    });  
} 

und in meinem HTML:

<div class="input-group"> 
     <input 
      type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code" 
      uib-typeahead="item for item in getLocationForSearch($viewValue)"/> 
     <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i> 
     <div ng-show="noResults"> 
      <i class="glyphicon glyphicon-remove"></i> No Results Found 
     </div> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" name="search" ng-model="asyncSelected" type="submit" ng-click="getWeather(asyncSelected)"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
      </button> 
     </span> 
    </div><!-- /input-group --> 

Es gibt mehrere Beiträge hier für das gleiche Problem, aber keine wirklich mein spezielles Problem beantworten. Jede Hilfe wird geschätzt.

Answer 1

Ihre Funktion getLocationForSearch() ist nicht gut: Es muss eine Versprechen zu uib-typeahead Richtlinie zurückgeben. So arbeiten Code lautet:

$scope.getLocationForSearch = function(locationString) { 

    $scope.locationString = locationString; 
    var url = '/autoComplete/' + locationString ; 

    return $http({ 
     method: 'GET', 
     url: url 
    }).then(function successCallback(response) { 
     console.clear(); 
     return response.data.results.map(function(item) { 
     console.log(item.name); 
     return item.name; 
     }); 
    }, function errorCallback(response) { 
     console.log(response); 
    }); 
    } 

Hier ist ein funktionierendes Beispiel auf Plunker ist:

http://plnkr.co/edit/v67vR8f3nHImGSoAUyBd?p=preview