jquery ui自动完成\u renderItem似乎会干扰select事件

如果使用_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 );
};

无论哪种方式，select都不会启动_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 );
};

$.ui.autocomplete.prototype.\u renderItem=函数（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（'

生成的标记中带有
a
标记的示例：

令人悲哀的是，jQuery UI的官方文档不仅完全忽略了这一点，而且实际上它们告诉您做了错误的事情。下面是它们的
\u renderItem
示例代码：
$（“
”）.attr（“数据值”，item.value）。append（item.label）。appendTo（ul）；
（注意缺少
）。感谢上帝给出了这个答案。此外，就像现在的UI 1.12一样。*最好放置一个容器，而不是一个100%宽度的容器
$.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 );
};