我想添加一个搜索栏，以便用户可以搜索和筛选关键字的折叠（有1级到4级），他们想要的。我能够得到搜索/筛选1级折叠的关键字，但无法筛选2级到4级。谁能请帮助我如何才能让我的搜索/筛选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>这是用于搜索/筛选列表的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
1条答案
按热度按时间lmvvr0a81#
在决定显示/隐藏顶层项之前，您还需要考虑嵌套项。
您已经迭代了所有的
<li>，而不考虑级别，因此您真正需要添加的是，如果某个项的 * 嵌套 * 项中包含搜索词，则 * 不 * 隐藏该项。下面的代码应该可以工作（未测试）。HTMLElement.innerText返回当前项的全文，* 包括 * 它的任何嵌套项。