如果 jquery ui 自动完成有图像，我该如何捕获 select 事件？

Question

我有 this jsfiddle。我正在尝试创建一个带有图像的自动完成功能，当用户 select 是一张图像时，我想捕获该事件，但由于某种原因它不适用于图像：

$("#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);
        };

如果我 return 只是纯文本（只是取消注释上面代码中的那部分）我可以捕获 select 事件但它不适用于图像？我也没有运气设置 z-index。

编辑：我更正了 jsfiddle link

Answer 1

我建议如下：

.data("uiAutocomplete")._renderItem = function(ul, item) {
  return $('<li style="margin-bottom:2px;"></li>').data("item.autocomplete", item).append('<div><img src="' + item.label + '" style="width:215px;"/></div>').appendTo(ul);
});

由于您使用的是 <a>，它的点击事件首先冒泡，这不允许点击以 <li> 为目标，因此不会触发 select。

使用 DIV 的示例：https://jsfiddle.net/Twisty/napvj856/28/

Answer 2

您需要列表中的一些文本：

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

如果 jquery ui 自动完成有图像，我该如何捕获 select 事件？

How do I capture the select event for a jquery ui autocomplete if it has images?

javascript

css

jquery

jquery-ui

autocomplete