AngularJS + UI引导键盘缓冲实现问题 [英] AngularJS + UI Bootstrap Typeahead implementation issue

问题描述

我想用我的Web API控制器采用这种code，工作正常实现键盘缓冲：

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>

控制器在app.js

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

然而，当我换返回$ http.jsonp（http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK＆安培;过滤器= US＆安培; Q =+的cityName）打电话给我自己的WebAPI控制器返回$ http.jsonp（API /机场/+的cityName）将停止工作。

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.

但是，如果我直接打电话给我的Web的API，如的http：// mysite的：80 / API /机场/洛杉矶返回此JSON：

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)"]

这是完全按照 http://gd.geobytes.com/AutoCompleteCity?filter=US&q=los 返回的格式相同

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"]

请指教。

推荐答案

有没有必要使用JSONP如果您的Web API是在同一个域中的angularjs应用程序（和您的Web API不似乎支持反正JSONP ）。

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).

您可以只使用这样一个简单的GET请求：

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

希望这有助于。

这篇关于AngularJS + UI引导键盘缓冲实现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！