JQuery UI автозаполнение принести данные из файла JSON

Question

Я действительно изо всех сил пытаюсь использовать плагин автозаполнения пользовательского интерфейса jQuery. Я посмотрел несколько демонстраций, но все еще не могу заставить их работать должным образом. То, что я хочу сделать, это принести данные из моего файла 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

Источник может указывать непосредственно на URL, который даст ответ JSON.

$("#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"
}, {...}]

Я думаю, вы получите идентификатор, метку, значение. Просто к вашему сведению, вы также можете отправить дополнительную информацию и получить к ней доступ в javascript, как $("#log").html(ui.item.extrastuff1);