Javascript popover box-如何动态更新popover内容？

如何动态更新popover内容

嗨，我正试图在一个静态网站上建立一个搜索栏，生成一个数据的Popover列表。搜索栏应该过滤掉数据列表，然后更新html代码并将其发送到popover函数。这里是我在CodePen中的代码演示

以下是我的问题：搜索过滤数据列表。数据列表会更新，但不会将html内容传输到popover box

JS代码

//POPOEVER PART 1 - CODE TO HANDLE SEARCH/FILTER FUNCTION FOR POPOVER CONTENT ON SEARCH BAR

// INITIATE FUNCTION ON EVENT KEY DOWN
$("#searchInput")
  .keydown(function () {
    //split the current value of searchInput
    var data = this.value.toUpperCase().split(" ");
    //create a jquery object of the rows
    var jo = $("#fbody").find("li");
    if (this.value == "") {
      jo.show();
      return;
    }
    //hide all the rows
    jo.hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
      var $t = $(this);
      for (var d = 0; d < data.length; ++d) {
        if ($t.text().toUpperCase().indexOf(data[d]) > -1) {
          return true;
        }
      }
      return false;
    }).show();
  })
  .focus(function () {
    this.value = "";
    $(this).css({ color: "black" });
    $(this).unbind("focus");
  })
  .css({ color: "#C0C0C0" });

//POPOEVER PART 2 - CODE TO HANDLE INPUT KEY POPOVER ON SEARCH BAR

//SANITIZE TABLE ON POPOVER
$.fn.popover.Constructor.Default.whiteList.table = [];
$.fn.popover.Constructor.Default.whiteList.tr = [];
$.fn.popover.Constructor.Default.whiteList.td = [];
$.fn.popover.Constructor.Default.whiteList.th = [];
$.fn.popover.Constructor.Default.whiteList.div = [];
$.fn.popover.Constructor.Default.whiteList.tbody = [];
$.fn.popover.Constructor.Default.whiteList.thead = [];
$.fn.popover.Constructor.Default.whiteList.img = [
  "src",
  "alt",
  "title",
  "width",
  "height"
];
$.fn.popover.Constructor.Default.whiteList.label = [];
$.fn.popover.Constructor.Default.whiteList.cite = [];

//STEP 1 : INITIATE POPOVER ON FIRST KEY UP (TO UPDATE TABLE ON EACH KEY)
$("#searchInput").keyup(function () {
  $(".trigger").popover({
    container: "body",
    placement: "bottom",
    html: true,
    trigger: "focus",
    content: function () {
      var content_popover = $("#popover-content").html();
      return content_popover;
    }
  });
  //STEP 2 : INITIATE POPOVER USING ENTER KEY
  $("#searchInput").keyup(function (event) {
    var keycode = event.keyCode ? event.keyCode : event.which;
    if (keycode == "13") {
      $(".trigger").popover("show");
    }
  });
  //STEP 3 :  QUIT POPOVER IF SEARCH BAR IS EMPTY
  if ($("#searchInput").val() === "") {
    $(".trigger").popover("hide");
  }
});

$(document).keyup(function (e) {
  if (e.key === "Escape") {
    // escape key maps to keycode `27`
    $(".trigger").popover("hide");
  }
});

//STEP 4 : QUIT POPOVER USING ESCAPE KEY

//END EVENT TO HANDLE POPOVER ON SEARCH BAR

//POPOEVER第1部分-处理搜索栏上POPOVER内容的搜索/筛选功能的代码
//事件键按下时启动功能
$（“#搜索输入”）
.keydown（函数（）{
//拆分searchInput的当前值
var data=this.value.toUpperCase（）.split（“”）；
//创建行的jquery对象
var jo=$（“#fbody”）.find（“li”）；
如果（this.value==“”）{
jo.show（）；
返回；
}
//隐藏所有行
jo.hide（）；
//循环过滤jquery对象以获得结果。
jo.filter（函数（i，v）{
var$t=$（本）；
对于（变量d=0；d-1）{
返回true；
}
}
返回false；
}).show（）；
})
.focus（函数（）{
此值为“”；
$（this.css（{color:“black”}）；
美元（本）。解除绑定（“焦点”）；
})
.css（{颜色：#c0}）；
//POPOEVER第2部分-在搜索栏上处理输入键POPOVER的代码
//对POPOVER上的桌子进行消毒
$.fn.popover.Constructor.Default.whiteList.table=[]；
$.fn.popover.Constructor.Default.whiteList.tr=[]；
$.fn.popover.Constructor.Default.whiteList.td=[]；
$.fn.popover.Constructor.Default.whiteList.th=[]；
$.fn.popover.Constructor.Default.whiteList.div=[]；
$.fn.popover.Constructor.Default.whiteList.tbody=[]；
$.fn.popover.Constructor.Default.whiteList.thead=[]；
$.fn.popover.Constructor.Default.whiteList.img=[
“src”，
“alt”，
“头衔”，
“宽度”，
“高度”
];
$.fn.popover.Constructor.Default.whiteList.label=[]；
$.fn.popover.Constructor.Default.whiteList.cite=[]；
//步骤1：在第一个键上启动POPOVER（更新每个键上的表）
$（“#searchInput”）.keyup（函数（）{
$（“.trigger”）.popover({
容器：“主体”，
位置：“底部”，
是的，
触发：“聚焦”，
内容：功能（）{
var content_popover=$（“#popover content”）.html（）；
返回内容(u popover);；
}
});
//步骤2：使用ENTER键启动POPOVER
$（“#searchInput”）.keyup（函数（事件）{
var keycode=event.keycode？event.keycode:event.which；
如果（键码==“13”）{
$（“.trigger”）.popover（“show”）；
}
});
//步骤3：如果搜索栏为空，则退出POPOVER
if（$（“#搜索输入”）.val（）=“”）{
$（“.trigger”）.popover（“隐藏”）；
}
});
$（文档）.keyup（函数（e）{
如果（e.key==“Escape”）{
//转义键映射到keycode`27`
$（“.trigger”）.popover（“隐藏”）；
}
});
//步骤4：使用退出键退出POPOVER
//结束事件以处理搜索栏上的POPOVER

感谢您查看我的帖子，非常感谢您的每一个回答

我怀疑您正在使用jQuery隐藏li元素，jQuery将“display:none”添加到各个元素中。但在构建popover时，popover包装器将覆盖传递给弹出窗口的html的显示属性，从而显示所有内容

我正在添加/删除自定义css类

.li-hide{
  display: none !important;
} 

---

这就迫使这种风格过时了！重要的关键字，因此它的工作。虽然我遇到了一个错误，如果popup未被删除，dom不会更新，我正在清除输入，但popover显示了正确的数据。

谢谢，我发现另一个解决方案是不使用boostrap中的内置popover。我使用PositionAbsolute将列表项放在搜索栏旁边，并在css中进行调整以创建我自己的popoever。现在可以用了。