jQuery UI 自动完成从 json 文件中获取数据

Question

我真的很难尝试使用 jQuery UI 自动完成插件。我已经看过一些演示，但似乎仍然无法让它正常工作。我想要做的是从我的名为destination.json 的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、标签、值。仅供引用，您还可以发回额外信息并在 javascript 中访问它，例如 $("#log").html(ui.item.extrastuff1);