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

Question

如何动态更新弹出内容？

嗨，我正在尝试建立一个静态网站上的搜索栏，产生一个弹出式列表的数据。搜索栏应该过滤掉数据列表，然后更新html代码并将其发送到popover函数。下面是我的CodePen代码的演示

https://codepen.io/phat-xluong/pen/YzqLWwz

以下是我的问题:搜索会过滤数据列表。更新数据列表，但不将html内容传送到弹出框。

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

感谢您浏览我的帖子，非常感谢您的回答。

Answer 1

检查此fiddle。

我怀疑您使用jQuery隐藏了li元素，它将"display : none“添加到相应的元素中。但是当popover正在构建时，popover包装器将覆盖传递给popup的html的display属性，从而显示所有内容。

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

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

这通过!important关键字强制样式，因此它是有效的。虽然我遇到了一个bug，如果弹出窗口不被忽略，那么dom不会更新，并且我正在清除输入，但是popover显示了正确的数据。