Angular-UI typeahead results not showing in dropdown

Question

Im using Angular-ui typeahead component to hit an autocomplete API, and I'm parsing the data I get back into an array called resp. However, Im not seeing the data getting passed to the autocomplete dropdown in the UI. BTW, the controller has a console.log that displays the data correctly, so i know its returning from the api call.

Here is my controller function:

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

and in my 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 -->

There are several posts on here for this same issue but none really answer my specific problem. Any help is appreciated.

like @beaver said, you need to return a $promise – Joao Polo Dec 31 '15 at 11:10 — Joao Polo, Dec 31 '15 at 11:10

beaver · Accepted Answer · 2015-12-31T16:59:16.607

13

Your function getLocationForSearch() is not good: it has to return a promise to uib-typeahead directive. So working code is:

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

Here is a working example on Plunker:

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

edited Dec 31 '15 at 16:59

answered Dec 31 '15 at 10:51

beaver

17,333
2
40
66

I initially had this same code and really am not sure how this is different than what I have. I just added the `resp` variable to debug what was being returned. I changed it back but it didn't work. Also, 'results' should be in all caps...I know that doesn't change much, but that is how the json object is returned. No errors in the console btw. – pooky666 Dec 31 '15 at 16:15
4

You have to return the output of $http() function which is a promise, see https://docs.angularjs.org/api/ng/service/$http. Instead, you tried to return resp which is the response in the resolved promise. That is a different thing. – beaver Dec 31 '15 at 16:56
1

ohhh...`return $http({`... I see now. Thanks for your help! – pooky666 Jan 02 '16 at 23:45
Thanks for the help. This is a true and tested solution. – Mythul Oct 19 '17 at 10:20

Angular-UI typeahead results not showing in dropdown

1 Answers1