Popover box – Как динамически обновлять содержимое всплывающего окна? ⇐ Jquery

[Anonymous]

Как динамически обновлять содержимое всплывающего окна?
Я пытаюсь создать панель поиска на статическом веб-сайте, которая создает список данных всплывающего окна. Панель поиска должна отфильтровывать список данных, а затем обновлять HTML-код и отправлять его в функцию всплывающего окна. Вот демо моего кода в 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


Подробнее здесь: https://stackoverflow.com/questions/638 ... ynamically