时间戳

首页 > 解决方案 > 弹出框 - 如何动态更新弹出框内容？

javascript - 弹出框 - 如何动态更新弹出框内容？

问题描述

如何动态更新弹出框内容？

嗨，我正在尝试在生成 Popover 数据列表的静态网站上构建搜索栏。搜索栏应该过滤掉数据列表，然后更新 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

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

标签： javascripthtmljquerycssweb

解决方案

检查这个小提琴。

我怀疑你正在使用 jQuery 隐藏 li 元素，它正在向各个元素添加“显示：无”。但是在构建 popover 时，popover 包装器会覆盖传递给弹出窗口的 html 的 display 属性，因此会显示所有内容。

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

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

它通过 !important 关键字强制样式，因此它可以工作。虽然我遇到了一个错误，如果弹出窗口没有被解除并且我正在清除输入但弹出窗口显示正确的数据，则 dom 不会更新。

推荐阅读