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，标签，价值。仅供参考，您还可以发回更多信息并通过$("#log").html(ui.item.extrastuff1);

等javascript访问

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

1 个答案: