Question

我有一个带有输入字段的页面，该字段具有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'
          }
        });
      },
    }
  }
});

popover内容的HTML是：

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

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

Answer 1

您需要使用jQuery自动完成的open方法，如下所示

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

如何在jquery的自动完成下拉列表旁边显示一个popover？

1 个答案: