带有外部 json 源的 jquery 自动完成

Question

我有一个使用本地 json 源的自动完成功能。鉴于它有 16k 行代码，我想将其移至外部 json 文件。但是我似乎无法让它与外部源文件一起使用。谁能指出我正确的方向？目前此代码不起作用，但也不会向控制台返回任何错误。

自动完成脚本

$(function() {
  $.ajax({
    url: "javascripts/airports.json",
    dataType: "json",
    success: function(request, response) {
             var data = $.grep(suggestion, function(value) {
               return value.city.substring(0, request.term.length).toLowerCase() == request.term.toLowerCase();
             });
  $('#autocomplete').autocomplete({
  minLength: 1,
  source: data,
  focus: function(event, ui) {
              $('#autocomplete').val(ui.item.city,ui.item.country);
              return false;
    },
  select: function(event, ui) {
    $('#autocomplete').val(ui.item.name);
      return false;
      }
      }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
          .data( "ui-autocomplete-item", item )
            .append( "<a>" + item.city + "," + item.country + "</a>" )
              .appendTo( ul );
          };
        }
    });
  });

外部数据结构

var suggestion =
  [
  {"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"2","name":"Madang","city":"Madang","country":"Papua New Guinea","iata":"MAG","icao":"AYMD","latitude":"-5.207083","longitude":"145.7887","altitude":"20","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"3","name":"Mount Hagen","city":"Mount Hagen","country":"Papua New Guinea","iata":"HGU","icao":"AYMH","latitude":"-5.826789","longitude":"144.295861","altitude":"5388","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"4","name":"Nadzab","city":"Nadzab","country":"Papua New Guinea","iata":"LAE","icao":"AYNZ","latitude":"-6.569828","longitude":"146.726242","altitude":"239","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
  ,
  {"id":"5","name":"Port Moresby Jacksons Intl","city":"Port Moresby","country":"Papua New Guinea","iata":"POM","icao":"AYPY","latitude":"-9.443383","longitude":"147.22005","altitude":"146","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}
]

Answer 1

您的响应应该是一个 JSON 对象（数组），其中每个项目都是一个带有 id、label 和 value 键的对象。

json 文件中的项目没有 label 和 value 键，因此自动完成无法真正显示它们。

最佳解决方案 - 更改文件/响应的内容以遵循 id/label/value 结构。

如果您不能这样做 - 您可以使用 _renderItem 函数根据 json 文件的内容在自动完成中创建自己的项目：

$('#autocomplete').autocomplete({
    ...
    _renderItem: function( ul, item ) {
        return $( "<li>" )
            .append( item.name )
            .appendTo( ul );
    }
    ...
});