I risultati di typeahead di Angular-UI non vengono visualizzati nel menu a discesa

Question

Im utilizzando il componente typeahead Angular-ui per eseguire un'API di completamento automatico e sto analizzando i dati che torno in un array denominato resp. Tuttavia, non riesco a vedere i dati che vengono passati al menu a discesa di completamento automatico nell'interfaccia utente. A proposito, il controller ha un console.log che visualizza correttamente i dati, quindi so che sta tornando dalla chiamata API.

Qui è la mia funzione di regolatore:

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

e nel mio 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 --> 

Ci sono diversi messaggi su qui per questo stesso problema ma nessuno in realtà risponde alla mia problema specifico. Qualsiasi aiuto è apprezzato.

Answer 1

La vostra funzione getLocationForSearch() non è buona: deve restituire una direttiva a uib-typeahead. codice in modo di lavoro è:

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

Ecco un esempio di lavoro sul Plunker:

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