jQuery UI自动填充小部件和Chrome中的renderItem

Question

我使用自动填充小部件在用户键入输入框时显示建议的下拉列表。

• 的jQuery 1.10.2
• jQuery UI的JS 1.11.2
• jQuery UI的CSS 1.11.2

一切似乎都在Firefox（29.0.1）和Safari浏览器工作大（7.0 .6），但经过几个小时的尝试不同的事情，它似乎没有在Chrome（38.0）中工作。

编辑：没有警告，没有错误，没有下拉菜单显示。

$("#MyInput").autocomplete({ 
    source: "/contacts/ajax_search.json" 
}).data("uiAutocomplete")._renderItem = function(ul, item){ 
    return $("<li>").append("<a>" + item.Contact.name + "</a>").appendTo(ul); 
} 

来自/contacts/ajax_search.json的数据是这样的;

[{"Contact":{"id":"1669","name":"Marta Smith"}}] 

在Chrome中，renderItem甚至不似乎被调用，即console.log(item)函数内什么都不做。

任何帮助非常感谢！

Answer 1

问题似乎在于Chrome如何处理异步ajax请求，因为没有选项可以设置自动填充小部件通过标准选项同步发出请求。

解决方法如下，使用自定义的source函数来获取数据;

$("#MyInput").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "/contacts/ajax_search.json?term=" + request.term, 
      async: false, 
      success: function(data) { 
       response(data); 
      } 
     }); 
    } 
}).data("uiAutocomplete")._renderItem = function(ul, item){ 
    return $("<li>").append("<a>" + item.Contact.name + "</a>").appendTo(ul); 
}