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);
}