搜索/过滤折叠级别关键字

Question

我想添加一个搜索栏，以便用户可以在折叠（具有级别 1 到级别 4）中搜索和过滤他们想要的关键字。我能够获得 search/filter 级别 1 的关键字折叠，但无法将级别 2 过滤到级别 4。任何人都可以帮助我如何让我的 search/filter 级别 2 和级别 4显示。请帮忙。提前致谢。

这是 html 代码：

@*Collapsible*@
    <button type="button" class="collapsible">1. Criteria: Industry Search</button>
    <div class="content">
        <br />
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
        @*<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">*@                       
        <h3>Industry Selection</h3>
        <br />
        <div class="industry-compnent">
            <ul id="myUL">
                @for (int i = 0; i < Model.Industries.Count(); i++)
                {
                    //EC: add start tags for lvl 1 items
                    if (Model.Industries[i].Industry_Level == 1)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none" >(@Model.Industries[i].GIC_Code)</span></a></span>
                                <ul class="nested"
                        </text>
                    }
                    //EC: add start tags for lvl 2 items
                    if (Model.Industries[i].Industry_Level == 2)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none">(@Model.Industries[i].GIC_Code)</span></a></span>
                                <ul class="nested">
                        </text>
                    }
                    //EC: add start tags for lvl 3 items
                    if (Model.Industries[i].Industry_Level == 3)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none">(@Model.Industries[i].GIC_Code)</span></a></span>
                                <ul class="nested">
                        </text>
                    }
                    //EC: add start and end tags for lvl 4 items (can do it together because lvl 4 is the lowest lvl)
                    if (Model.Industries[i].Industry_Level == 4)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none">(@Model.Industries[i].GIC_Code)</span></a></span>
                            </li>
                        </text>
                        //EC: add end tags of lvl 3 if this item is lvl 4 and next item is not lvl 4
                        if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 4 && Model.Industries[i + 1].Industry_Level != 4)
                        {
                            @Html.Raw("</ul></li>")
                            //EC: add end tags of lvl 2 if this item is lvl 4 and next item is not lvl 3
                            if (Model.Industries[i + 1].Industry_Level != 3)
                            {
                                @Html.Raw("</ul></li>")
                                //EC: add end tags of lvl 1 if this item is lvl 4 and next item is not lvl 2
                                if (Model.Industries[i + 1].Industry_Level != 2)
                                {
                                    @Html.Raw("</ul></li>")
                                }
                            }

                        }
                    }
                    //EC: add end tags of lvl 3 if this item is lvl 3 and next item is not lvl 4
                    if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 3 && Model.Industries[i + 1].Industry_Level != 4)
                    {
                        @Html.Raw("</ul></li>")
                        //EC: add end tags of lvl 2 if this item is lvl 3 and next item is not lvl 3
                        if (Model.Industries[i + 1].Industry_Level != 3)
                        {
                            @Html.Raw("</ul></li>")
                            //EC: add end tags of lvl 1 if this item is lvl 3 and next item is not lvl 2
                            if (Model.Industries[i + 1].Industry_Level != 2)
                            {
                                @Html.Raw("</ul></li>")
                            }
                        }
                    }
                    //EC: add end tags of lvl 2 if this item is lvl 2 and next item is not lvl 3
                    if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 2 && Model.Industries[i + 1].Industry_Level != 3)
                    {
                        @Html.Raw("</ul></li>")
                        //EC: add end tags of lvl 1 if this item is lvl 2 and next item is not lvl 2
                        if (Model.Industries[i + 1].Industry_Level != 2)
                        {
                            @Html.Raw("</ul></li>")
                        }
                    }
                    //EC: add end tags of lvl 1 if this item is lvl 1 and next item is not lvl 2
                    if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 1 && Model.Industries[i + 1].Industry_Level != 2)
                    {
                        @Html.Raw("</ul></li>")
                    }
                    //EC: add end tags of lvl 3,2,1 if this is the last item
                    //(e.g. If last item is lvl 4, then add close tags of lvl 3,2,1. If last item is lvl 3, then add close tags of lvl 2,1, etc.)
                    if (i + 1 == Model.Industries.Count())
                    {
                        for (int j = 1; j < Model.Industries[i].Industry_Level; j++)
                        {
                            @Html.Raw("</ul></li>")
                        }
                    }
                }
            </ul>
        </div>
    </div>
</div>

这是列表 searching/filter 的 JavaScript 代码：

<script>
    function myFunction() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li", "ul");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>

This is how the search function looks like with level 1 to level 4 of the collapse

Could not search/filter level 2 or level 3, level 4

Can only search/filter level 1

Answer 1

在决定 show/hide 顶级项目之前，您还需要以某种方式考虑嵌套项目。

您已经遍历了所有 <li>s，无论级别如何，所以您真正需要添加的只是不隐藏一个项目，如果它的任何嵌套个项目包含搜索词。

以下应该有效（未经测试）。 HTMLElement.innerText returns 当前项目的全文，包括它的任何嵌套项目。

if (li[i].innerText.toUpperCase().indexOf(filter) > -1) {
    …

搜索/过滤折叠级别关键字

Search / Filter collapse level keywords

javascript

html

jquery

search

collapse