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

Question

Im пытается использовать веб-службы, чтобы установить код аэропорта с помощью 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 
    }); 
});​ 

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

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

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

Answer 2

Я сделал небольшое изменение вызывает код выше, имеет небольшую ошибку, когда есть только один 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);