Angular-UI 下拉菜单中未显示预先输入的结果

Question

我正在使用 Angular-ui 预输入组件来点击自动完成 API，并且我正在解析返回到名为 resp 的数组中的数据。但是，我没有看到数据传递到 UI 中的自动完成下拉列表。顺便说一句，控制器有一个 console.log 可以正确显示数据，所以我知道它从 api 调用返回。

这是我的控制器函数：

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

在我的 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 -->

这里有几个帖子针对同一个问题，但 none 确实回答了我的具体问题。感谢任何帮助。

Answer 1

你的函数 getLocationForSearch() 不好：它必须 return promise 到 uib-typeahead 指令。所以工作代码是：

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

这是 Plunker 上的一个工作示例：

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

Angular-UI 下拉菜单中未显示预先输入的结果

Angular-UI typeahead results not showing in dropdown

javascript

angularjs

angular-ui-bootstrap

angular-ui-typeahead