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

【问题标题】：How do I capture the select event for a jquery ui autocomplete if it has images?如果有图像，如何捕获 jquery ui 自动完成的选择事件？
【发布时间】：2020-06-13 17:46:44
【问题描述】：

我有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 链接

【问题讨论】：

您似乎提供了错误的 JSFiddle 链接。
哦，是的，这会有所帮助！我已经更正了谢谢！
选择事件是相同的，但我认为您需要正确呈现菜单项以确保它们正确触发事件。请参阅此示例：jqueryui.com/autocomplete/#custom-data 它的项目 <li> 内部有一个 <div> 用于内容包装。你的没有，也不应该是<a>

标签： javascript jquery css jquery-ui autocomplete

【解决方案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;
}

【讨论】：

【解决方案2】：

我建议如下：

.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/

【讨论】：

嗯。这似乎无法纠正：jsfiddle.net/at7ck1pj
@user_78361084 我更新了我的答案。您需要致电item.label。我也会考虑切换到一个对象，其中标签是搜索词，值是 IMG URL。