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，label，value。只是FYI，你也可以发回额外的信息，并在JavaScript访问它，如$("#log").html(ui.item.extrastuff1);