在jQuery UI Autocomplete中为类似行创建以JSON结果为标题的折叠菜单

zpjtge22 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(79)

我尝试使用jQuery UI Autocomplete和JSON结果创建一个可折叠菜单。JSON对象items包含具有label、name和value属性的数据。我想将类似的name值组合在一起，并使用其中一个值作为 accordion 部分的标题。
下面是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CatComplete</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" id="all-list">
                <label for="search">Search:</label>
                <input id="search" class="form-control" />
                <div class="list-group panel" id="accordion"></div>
            </div>
        </div>
    </div>
</body>
</html>

字符串
这是我的JavaScript代码：

var items = [
    {label: "TY2021H", name: "10-Yr T-Notes", value: "TY2021H"},
    {label: "TY2020Z-TY2021H", name: "10-Yr T-Notes Spread", value: "TY2020Z-TY2021H"},
    {label: "TY2021H-TY2021M", name: "10-Yr T-Notes Spread", value: "TY2021H-TY2021M"},
    {label: "TY2020Z-2*TY2021H+TY2021M", name: "10-Yr T-Notes Butterfly", value: "TY2020Z-2*TY2021H+TY2021M"}
];

var myUL = $("#accordion");
myUL.empty();
var currentName = "";
for (var i = 0; i <= items.length - 1; i++) {
    var label = items[i].label;
    if (items[i].name != currentName) {
        currentName = items[i].name;
        list +=
            '<a href="#demo' +
            i +
            '" class="list-group-item list-group-item-info" data-toggle="collapse" data-parent="#accordion">' +
            currentName +
            ' <span id="opnClsSign" class="glyphicon glyphicon-menu-down"></span></a>';
        list += '<div class="collapse in" id="demo' + i + '">';
    }

    list += '<a href="#" class="list-group-item">' + label + "</a>";

}
list += "</div>";
myUL.append(list);

型
当前的实现使用JSON对象中的项创建一个 accordion 。但是， accordion 标题应该基于唯一的name值，并且每个部分都应该包含具有相同name的项目。目前，它不能正确地对项目进行分组。

我现在得到的结果

我的期望

如何修改JavaScript代码来实现此行为，并为每个组创建具有适当标题的折叠菜单？如有任何见解或建议，将不胜感激。谢谢你，谢谢

jquery

来源：https://stackoverflow.com/questions/64947884/creating-an-accordion-menu-with-json-result-as-title-for-similar-rows-in-jquery

2条答案

按热度按时间

rbpvctlc1#

代码缩进在这种情况下会有所帮助。最后两行应该在循环内，这样代码才有意义。在每次迭代中，必须关闭div并将代码添加到myUL：

var items = [
    {label: "TY2021H", name: "10-Yr T-Notes", value: "TY2021H"},
    {label: "TY2020Z-TY2021H", name: "10-Yr T-Notes Spread", value: "TY2020Z-TY2021H"},
    {label: "TY2021H-TY2021M", name: "10-Yr T-Notes Spread", value: "TY2021H-TY2021M"},
    {label: "TY2020Z-2*TY2021H+TY2021M", name: "10-Yr T-Notes Butterfly", value: "TY2020Z-2*TY2021H+TY2021M"}]

var myUL = $("#accordion");
myUL.empty();
var currentName = "";    
for (var i = 0; i <= items.length - 1; i++) {
  var label = items[i].label;
  var list = '';
  if (items[i].name != currentName) {
    currentName = items[i].name;
    list +=
        '<a href="#demo' +
        i +
        '" class="list-group-item list-group-item-info" data-toggle="collapse" data-parent="#accordion">' +
        currentName +
        ' <span id="opnClsSign" class="glyphicon glyphicon-menu-down"></span></a>';
    list += '<div class="collapse in" id="demo' + i + '">';
  }

  list += '<a href="#" class="list-group-item">' + label + "</a>";
  list += "</div>";
  myUL.append(list);
}

个字符
此外，还需要定义list。

赞(0）回复(0）举报 2023-08-04

sqserrrh2#

我能够自己解决这个问题，我在这里包含了最终的源代码：

var items = [
    { label: "TY2021H", name: "10-Yr T-Notes", value: "TY2021H" },
    { label: "TY2022H", name: "10-Yr T-Notes", value: "TY2022H" },
    { label: "TY2023H", name: "10-Yr T-Notes", value: "TY2023H" },
    { label: "TY202H", name: "10-Yr T-Notes", value: "TY2024H" },
    { label: "TY2020Z-TY2021H", name: "10-Yr T-Notes Spread", value: "TY2020Z-TY2021H" },
    { label: "TY2021H-TY2021M", name: "10-Yr T-Notes Spread", value: "TY2021H-TY2021M" },
    { label: "TY2022H-TY2023M", name: "10-Yr T-Notes Spread", value: "TY2022H-TY2023M" },
    { label: "TY2020Z-2*TY2021H+TY2021M", name: "10-Yr T-Notes Butterfly", value: "TY2020Z-2*TY2021H+TY2021M" }]
let finalData = items;

$(function () {
    $.widget("custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var myUL = $("#accordion");
            myUL.empty();
            var currentName = "";
            var list = "";
            let tobeClosed = -1;
            let nto = 0;
            var closeDiv = [];

            for (var i = 0; i <= items.length - 1; i++) {
                var label = items[i].label;

                if (items[i].name != currentName) {
                    nto++;
                    currentName = items[i].name;
                    list +=
                        '<a href="#demo' +
                        i +
                        '" class="list-group-item list-group-item-info" data-toggle="collapse" data-parent="#accordion">' +
                        currentName +
                        ' <span id="opnClsSign" class="glyphicon glyphicon-menu-down"></span></a>';
                    list += '<div class="collapse in" id="demo' + i + '">';
                    list +=
                        '<a href="#" class="list-group-item">' + label + "</a>";
                } else {
                    list +=
                        '<a href="#" class="list-group-item">' + label + "</a>";

                    if (items[i + 1] && items[i + 1].name != currentName) {
                        if (i > 0) {
                            tobeClosed = i + nto;
                            if (tobeClosed == i + nto) {
                                list += "</div>";
                            }
                        }
                    }
                }
            }
            myUL.append(list);
        },
    });

    $("#search").catcomplete({
        delay: 0,
        minLength: 2,
        source: finalData,
        response: function (event, ui) {
            if (ui.content.length === 0) {
                $("#accordion").empty();
                $("#accordion").append(
                    '<div class="alert alert-danger">No Results!</div>'
                );
            }
        },
    });
});

$(document).ready(function () {
    $("#search").keyup(function () {
        if ($("#search").val() == "") {
            $("#accordion").empty();
        }
    });
});

个字符
请随意查看！如果您有任何问题或需要进一步的帮助，请不要犹豫。编码快乐！😊

赞(0）回复(0）举报 2023-08-04

我来回答

在jQuery UI Autocomplete中为类似行创建以JSON结果为标题的折叠菜单

2条答案

相关问题

热门标签

最新问答