javascript - Geonames JSONP 结果未显示在下拉列表中

Question

我今天开始更加关注 angularJS，在我的项目中我需要 geonames。 我想创建类似 jQuery UI 的带有 geonames 的自动完成功能 like this .

当我 console.log 它时一切正常，我得到了结果，但由于某种原因我无法将它放入 typeahead 的下拉列表中。

范围

$scope.cities = function(cityName)
{
    return $http.jsonp("http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK&q="+cityName+"&maxRows=6").success(function(data){
        $.map(data.geonames, function(item)
        {
            return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
        });
    });
};

输入

<input type="text" class="span4" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">

我正在使用 UI Bootstrap对于 angular js，我尝试基于那个例子，但出了点问题，有人可以给我提示吗？

谢谢

Answer 1

$http.jsonp 异步执行请求，因此您在成功回调中所做的操作将丢失。

您可以使用 $q.defer 或观察者(但显然后者不能与 typeahead 一起正常工作)来应用成功回调中的值:

$scope.cities = function(cityName) 
{
    var dfr = $q.defer();

    $http.jsonp("http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK&q="+cityName+"&maxRows=6").success(function(data){
        dfr.resolve($.map(data.geonames, function(item)
        {
            return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
        }));
    });

    return dfr.promise;
};