jQuery UIオートコンプリートでjsonファイルからデータを取得する

Question

jQuery UIオートコンプリートプラグインを使用しようとすると本当に苦労しています。私はいくつかのデモを見てきましたが、それでも正しく動作するようには見えません。私がしたいのは、jsonファイルのdestination.jsonからデータを取り出すことです。

これは私がこれまで持っているものです。

$("#autocomplete").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "data/destination.json", 
      dataType: "json", 
      success: function(data) { 
       response(data.destinations); 
      } 
     }); 
    } 
}); 

& HTML

<div class="left">Destination</div> 
<div class="right"><input name="autocomplete" type="text" size="27" id="autocomplete"/></div> 
<div class="clear"></div> 

私が間違って何をしているのですか？ありがとうございました！

& JSON

{ 
"destinations": [ 
    { 
     "value": "Oceania and Australia", 
     "label": "Australia & South Pacific" 
    }, 
    { 
     "value": "Australia", 
     "label": "Australia" 
    }, 
    { 
     "value": "Brisbane", 
     "label": "Brisbane-Australia" 
    }, 
    { 
     "value": "GoldCoast", 
     "label": "GoldCoast-Australia" 
    }, 
    { 
     "value": "SunshineCoast", 
     "label": "SunshineCoast-Australia" 
    } 
] 
} 

Answer 1

ソースは、JSONレスポンスを与えるURLを直接指定することができます。

$("#ac").autocomplete({ 
    source: "data/destination.json", 
    minLength: 2, 
    select: function(event, ui) { 
     if (ui.item) { 
      // do something on successful select of an item 
     } 
    } 
}); 

ああ、jsonレスポンスは特定の形式でなければなりません。

[{ 
    "id": 1234, 
    "label": "Australia & South Pacific", 
    "value": "Oceania and Australia", 
    "extrastuff1": "hello", 
    "extrastuff2": "jin" 
}, {...}] 

あなたはID、ラベル、値を取得すると思います。ちょうどFYI、あなたはまた、余分な情報を返信して、javascriptでアクセスすることができます$("#log").html(ui.item.extrastuff1);