如果我使用_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做了它应该做的事情。 它修改了项目并且没有错误,但似乎破坏了选择。
这是因为您没有将项目包装在锚点(a
)标签中。更新代码以将img
包装在锚点中,它将正常工作:
$.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/