如果我使用 _renderItem,我的选择事件将不起作用。如果我注释掉调用 _renderItem 的最后一个代码块,则 select 事件将起作用。当我使用 _renderItem 时,选择事件根本不会触发。
var cache = {}, lastXhr;
$("#hifind-find").autocomplete({
source: function(request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
var posturl = '/hifind/jquery_ui/autocomplete/'+term;
lastXhr = $.post(posturl, function(data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
}, 'json');
},
delay: 300,
minLength: 1,
select: function(event, ui){
window.location = ui.item.dest;
}
});
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append('<img src="' + iconImgPath + item.flag + '-search.png" class="icon-autocomplete-bundle">' + item.label )
.appendTo( ul );
};
如果我做类似的事情,我会得到相同的结果...
$("#hifind-find").autocomplete(myConfig).data("autocomplete")._renderItem = renderItemFunction;
无论哪种方式,选择都不会触发。 _renderItem 做了它应该做的事情。它修改了项目并且没有错误,但似乎破坏了选择。
最佳答案
我相信这是因为您没有将项目包装在 anchor (a
) 标签中。更新您的代码以将 img
包装在 anchor 中,它将正常工作:
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a><img src="' + iconImgPath + item.flag + '-search.png" class="icon-autocomplete-bundle">' + item.label + '</a>')
.appendTo( ul );
};
以下是一些可能有帮助的示例:
在
_renderItem
中生成的标记中不包含a
标记的示例(select
在这里被破坏,就像您的问题一样): http://jsfiddle.net/MaLqe/生成的标记中带有
a
标记的示例:http://jsfiddle.net/3zSMG/
关于jquery ui autocomplete _renderItem 似乎干扰 select 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10900401/