外部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

あなたの応答は、各項目がid、labelとvalueキーを持つオブジェクトであるJSONオブジェクト（配列）であるべきです。

jsonファイルのアイテムにはlabelとvalueのキーが含まれていないため、オートコンプリートで実際に表示できません。

ベストソリューション - ファイル/応答の内容をid/label/value構造に変更してください。

あなたがこれを行うことができない場合 - あなたはJSONファイルの内容に基づいて、オートコンプリートで独自のアイテムを作成する_renderItem機能を使用することができます。

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