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

jquery自动完成与外部json源

1 个答案: