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

jQuery UI自动完成小部件和Chrome中的renderItem

1 个答案: