AngularJS + UI Bootstrap Typeahead implementation

2019-09-06 00:26发布

I am trying to implement Typeahead using my Web Api controller by adopting to this code, that works fine:

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl2">
    <pre>Model: {{result | json}}</pre>
    <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
</div>

Controller in app.js

myApp.controller('TypeaheadCtrl2', function ($scope, $http, limitToFilter) {

    //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

    $scope.cities = function (cityName) {
        return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName).then(function (response) {
            return limitToFilter(response.data, 15);
        });
    };
});

However when I change return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName) to call my own WebApi controller return $http.jsonp("api/airports/" + cityName) it stops working.

But if I call my Web Api directly, like http://mysite:80/api/airports/los it returns this json:

["San Martin DeLos Andes (CPC)","San Carlos DeBariloche (BRC)","Los Menucos (LMD)","Paso De Los Libres (AOL)","Barbelos (BAZ)","Los Angeles (LSQ)","Los Chiles (LSL)","Mali Losinj (LSZ)","Milos (MLO)","Volos (VOL)","Paso Caballos (PCG)","Los Mochis (LMM)","Vilanculos (VNX)","San Carlos (NCR)","Lagos (LOS)","Losuia (LSA)","Lossiemouth (LMO)","Los Angeles (JID)","Los Angeles (JBP)","Los Alamos (LAM)","Los Angeles (LAX)","Los Banos (LSN)","Lost Harbor (LHB)","Lost River (LSR)","San Carlos (SQL)","Los Angeles, CA (VNY)","Los Angeles (WHP)","Los Roques (LRV)"]

which is in exactly the same format as returned by http://gd.geobytes.com/AutoCompleteCity?filter=US&q=los:

["Los Alamitos, CA, United States","Los Alamos, CA, United States","Los Alamos, NM, United States","Los Altos, CA, United States","Los Angeles, CA, United States","Los Banos, CA, United States","Los Ebanos, TX, United States","Los Fresnos, TX, United States","Los Gatos, CA, United States","Los Indios, TX, United States","Los Lunas, NM, United States","Los Molinos, CA, United States","Los Ojos, NM, United States","Los Olivos, CA, United States","Los Osos, CA, United States","Losantville, IN, United States","Lost City, WV, United States","Lost Creek, KY, United States","Lost Creek, PA, United States","Lost Creek, WV, United States"]

Please advise.

3条回答
兄弟一词,经得起流年.
2楼-- · 2019-09-06 00:46

I think your typeahead is expecting a JSON object. And your API is returning javascript array. It should return possibly in below format:

{['CITY1', 'CITY2', 'CITY3']}

查看更多
孤傲高冷的网名
3楼-- · 2019-09-06 00:47

There is no need to use JSONP if your Web Api is on the same domain as your angularjs application (and your Web Api doesn't seems to support JSONP anyway).

You could just use a simple GET request like this:

$scope.cities = function (cityName) {
    return $http.get("api/airports/" + cityName).then(function (response) {
        return limitToFilter(response.data, 15);
    });
};

Hope this helps.

查看更多
成全新的幸福
4楼-- · 2019-09-06 00:59

Try to use ´$http.get´ separate the promise from the assingment of ´$scope.cities´:

myApp.controller('TypeaheadCtrl2', function ($scope, $http, limitToFilter) {

    $http.get("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName).then(function (response) {
        $scope.cities = limitToFilter(response.data, 15);
    });
});
查看更多
登录 后发表回答