如何在 jquery 的自动完成下拉列表旁边显示一个弹出框？答案

【问题标题】：How do I display a popover next to a jquery's autocomplete dropdown?如何在 jquery 的自动完成下拉列表旁边显示一个弹出框？
【发布时间】：2016-02-06 02:58:15
【问题描述】：

我有一个带有 jquery 自动完成下拉菜单的输入字段的页面。目前，当将鼠标悬停在其中一个自动完成选项上时，页面上的其他位置会显示一个 div。

$("#MyInputField").autocomplete({
  focus: function (e, ui) {
    $.ajax({
    type: "GET"
    url: "/Json/GetMoreAutoCompleteDetails" + ui.item.id,
    success: function (result){
      $('#SomeDiv').show();
      },
    }
  }
});

我正在尝试用弹出窗口替换“SomeDiv”。我已经像这样修改了上面的代码：

$("#MyInputField").autocomplete({
  focus: function (e, ui) {
    $.ajax({
    type: "GET"
    url: "/Json/GetMoreAutoCompleteDetails" + ui.item.id,
    success: function (result){
      $(ui.item).popover({
        'content': function(){
          return $('#SomeDiv');
          },
          'html': true,
          'trigger': 'hover'
          }
        });
      },
    }
  }
});

弹出框内容的 HTML 是：

<div id="SomeDiv" class="hide">
  <div id="somePopoverField"></div>
</div>

这旨在在当前悬停的自动完成菜单项旁边显示一个弹出框。但是，我知道“ui.item”是不正确的，因为它不起作用。为了让弹出框显示在自动完成的菜单项旁边，我需要定位什么？

【问题讨论】：

能否也提供HTML
我为弹出框内容添加了 html。这就是你要找的东西吗？
检查答案，看看是否符合您的预期
你的小提琴（大部分）如我所料。它不显示 div 内容，但弹出窗口显示在正确的位置，并按我的预期移动。不幸的是，我还不能在我的项目中复制它。我想知道是否存在 Jquery 或 Bootstrap 版本不匹配。
检查 jquery/bootstrap 版本并告诉我

标签： javascript jquery twitter-bootstrap autocomplete

【解决方案1】：

需要使用jQuery自动补全的open方法如下

open: function(event, ui) {
  var term = $(this).val();
  $(this).autocomplete("widget").find(".ui-menu-item")
    .popover({
      container: 'body',
      content: function() {
        return $('#SomeDiv').removeClass("hide");
      },
      html: true,
      trigger: 'hover'
    });
}

演示：https://jsfiddle.net/tn2433tu/2/

【讨论】：

这非常接近解决问题。我必须在弹出窗口中添加“'container':'body'”选项。进行更改，我会将您的答案标记为正确。感谢您的帮助！
给未来用户的另一个注意事项，您需要返回 $('SomeDiv').html().removeClass('hide');否则，内容 div 将被销毁。