Jquery/Json UI自动完成机场代码

Question

我试图使用Web服务使用Jquery UI自动完成设置机场代码:

WS是:http: //airportcode.riobard.com - http://airportcode.riobard.com/search?q=dallas&fmt=JSON

我无法创建自动完成,这是我的javascript代码:

<script>
$(function() {
    function log( message ) {
        $( "<div/>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://airportcode.riobard.com",
                dataType: "jsonp",
                data: {
                    fmt: "JSONP",
                    q: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.code + (item.name ? ", " + item.location : "") + ", " + item.location,
                            value: item.code
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });
});
</script>




 <!-- HTML Code is -->

<div class="demo">

<div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city" />

</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 50px; width: 200px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->

Answer 1

首先,您使用的数据源不支持JSONP.你不能只是抓住一个任意的JSON数据源并告诉jQuery它是JSONP并期望它能够工作.必须将服务器配置为接收它附加到响应的回调参数,在完成后调用代码并将其注入页面.

您可以使用YQL或编写调用服务的服务器端代码来解决此问题.

以下是使用YQL的示例:

function buildQuery(term) {
    return "select * from json where url = 'http://airportcode.riobard.com/search?fmt=JSON&q=" + encodeURI(term) + "'";
}

function makeRequest(request, response) {
    $.ajax({
        url: 'http://query.yahooapis.com/v1/public/yql',
        data: {
            q: buildQuery(request.term),
            format: "json"
        },
        dataType: "jsonp",
        success: function(data) {
            var airports = [];
            if (data && data.query && data.query.results && data.query.results.json && data.query.results.json.json) {
                airports = data.query.results.json.json;
            }

            response($.map(airports, function(item) {
                return {
                    label: item.code + (item.name ? ", " + item.location : "") + ", " + item.location,
                    value: item.code
                };
            }));
        },
        error: function () {
            response([]);
        }
    });
}

$(document).ready(function() {
    $("#airport").autocomplete({
        source: makeRequest,
        minLength: 2
    });
});?

因此,我们不会直接调用Web服务,而是要求YQL发出请求并返回结果.YQL充当包装器,使得通过JSONP可访问其他无法访问的Web服务.

在该success方法中,我们必须经历几个属性才能最终访问数据.在我们这样做之后,我们可以以自动完成小部件期望(带$.map)的方式格式化结果.

示例: http ://jsfiddle.net/BQxw4/40/