javascript - 如果 jquery ui 自动完成有图像，如何捕获它的选择事件？

Question

我有this jsfiddle 。我正在尝试使用图像创建自动完成功能，当用户选择图像时我想捕获该事件，但由于某种原因它不适用于图像:

$("#input").autocomplete({
          //source: tags,
          source: images,
          minLength: 1,
          delay: 0,
          open: function(){
            $('.ui-menu .ui-menu-item a').css('word-wrap','break-word');
          },
          close: function () { $('.ui-autocomplete').show() },
          focus: function(event, ui) {
            return false;
          },
          select: function(event, ui){
            alert("here there");
            return false;
          }
        }).data("uiAutocomplete")._renderItem = function(ul, item){
         //return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<a>hi there</a>').appendTo(ul);
         return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<a><img src="' + item + '" style="width:115px;"/></a>').appendTo(ul);
        }; 

如果我只返回纯文本(只需取消上面代码中该部分的注释)，我可以捕获选择事件，但它不适用于图像？我还设置了 z-index，但没有成功。

编辑:我更正了 jsfiddle 链接

Answer 1

您需要在列表中添加一些文本:

return $('<li style="margin-bottom:2px;">'+item.label+'</li>').data("item.autocomplete", item).append('<a><img src="' + item + '" style="width:115px;"/></a>').appendTo(ul);

然后，您可以通过设置隐藏文本:

li {
  font-size: 0;
}

并通过设置调整.ui-state-active:

a {
  display: block;
}