jquery autocomplete UI——用标签定位图像

Question

我试图在 jquery 自动完成小部件的结果中包含一个图像。

$("#search").autocomplete({
  source: data,
  minLength: 2,
  }).data("uiAutocomplete")._renderItem = function (ul, item) {
    return $("<li />")
      .data("item.autocomplete", item)
      .append("<a><span><img style=\"max-height: 50px;\" src='" + item.thumbnail + "' />" + item.label + "</span></a>")
      .appendTo(ul);
     }; 
  },

我的代码可以正常工作，但我似乎无法弄清楚如何在图像和文本之间创建空间。现在，我的结果如下所示:

如您所见，图像和结果链接之间没有间距(如果仔细观察，您会看到“Rue de la Bavole, Honfleur”框的开头位于最左侧)。

是否有解决此问题的简单方法？

解决方案

我能够通过将文本仅放在 <a> 中来解决标签。这是代码

.append("<img style=\"max-height: 50px; margin-right: 5px;\" src='" + item.thumbnail + "'/>" + "<a>" + item.label + "</a>")

Answer 1

你可以尝试给图片的style属性加一些边距，例如:

改变这个:

.append("<a><span><img style=\"max-height: 50px;\" src='" + item...

为此:

.append("<a><span><img style=\"max-height: 50px; margin-right: 10px;\" src='" + item...