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/

Answer 2

我稍作修改导致上面的代码有一点bug，当树结构只有一个json对象发生变化时，在只有一个对象的情况下尝试这个修复。

if (data && data.query && data.query.results && data.query.results.json && data.query.results.json.json) {
                airports = data.query.results.json.json;
            }else if( data && data.query && data.query.results && data.query.results.json ){
                airports = data.query.results;
            }
                jQuery.makeArray(airports);

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

2 个答案: