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

Posted 2023-05-08

【中文标题】如果有图像，如何捕获 jquery ui 自动完成的选择事件？

【英文标题】：How do I capture the select event for a jquery ui autocomplete if it has images?

【发布时间】：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>

【参考方案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。