与外部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); 
    } 
    ... 
});