Jquery / Json UI автозаполнение Код аэропорта - PullRequest
Новая
       26

Jquery / Json UI автозаполнение Код аэропорта

2 голосов
/ 26 февраля 2012

Я пытаюсь использовать веб-сервис для установки кода аэропорта с помощью автозаполнения 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 -->

Ответы [ 2 ]

6 голосов
/ 27 февраля 2012

Во-первых, используемый вами источник данных не поддерживает 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
    });
});​

Поэтому вместо прямого вызова веб-службы мы попросим YQL сделатьзапрос и вернуть результат.YQL действует как оболочка, делая недоступный в противном случае веб-сервис, доступный через JSONP.

В методе success нам нужно пройти через несколько свойств, чтобы наконец получить доступ к данным.После этого мы можем отформатировать результаты так, как ожидает виджет автозаполнения (с $.map).

Пример: http://jsfiddle.net/BQxw4/40/

2 голосов
/ 05 октября 2012

Я внес небольшую модификацию, потому что в приведенном выше коде есть небольшая ошибка: когда существует только один объект 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);
...