javascript - jquery中的自定义过滤器列表

Question

我有一个搜索栏并使用这两个库。我在搜索栏上有过滤器列表

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

当它给了我一个简单的过滤器列表但我想要对该过滤器列表的设计进行一些更改时。现在是这样的

但我想要这样的搜索过滤器

我尝试了很多，但我失败了。这是我尝试的代码

$('.ui-front').on('DOMNodeInserted', 'li', function(e) {
    var arjuna=e.target.firstElementChild.innerHTML;
    e.target.removeChild(e.target.childNodes[0]);

    $('.ui-front').off('DOMNodeInserted');


    $(e.target).append(
            '<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">' +
            '<div class="row">'+
            '<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="justify-content: center;display: flex;">' +
            '<img src="https://images.hugoboss.com/is/image/boss/hbeu50325887_399_100?$re_fullPageZoom$&amp;qlt=85&amp;extendN=0.05%2C0.05%2C0.05%2C0.05&amp;wid=461&amp;hei=698" alt="Product Picture" style="height: auto;width: 50px;">' +
            '</div>' +
            '<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">' +
            '<h4 style="color: blue;padding: 6px;font-size: 14.5px;">'+arjuna+'</h4>' +
            '<h5 style="color: black;font-size: 14px;padding-left: 6px;">Figura infantil Ben10 (Cannotbolt), 4X5In (10x13cm)</h5>'+
            '<h6 style="float: left;color: black;padding: 6px;font-size: 13px;"><del>$ 77.00</del></h6>'+
            '<h6 style="font-size: 13px;float: left;margin-left: 10px;color: black;padding: 6px;">$ 75.00</h6>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '<hr style="margin-top:7px;margin-bottom:7px">'
);
});

在这段代码中，我删除了无序列表的列表项并插入了我的 HTML 代码，但由于DOMNodeInserted它变成了无限循环。任何形式的帮助将不胜感激！

标签： javascripthtmljquery