我有一个复选框树结构,可以用来进行选择-但我也希望能够过滤显示的内容。如果您在搜索框中输入内容,则不匹配的内容将被隐藏。但是,这不适用于嵌套列表中的项目。他们只是被忽略。我一辈子都无法弄清楚为什么他们没有表现出来。我尝试了多个选择器和父/子变体,但没有任何效果。
这是我的jsfiddle显示我目前拥有的东西: fiddle
以下是处理搜索过滤器的部分代码:
function searchFunction() {
var input, filter, ul, li, div, i, heading;
input = document.getElementById("input-search");
filter = input.value.toUpperCase();
ul = document.getElementById("treeview");
li = $('#treeview .list-group-wrapper li');
for (i = 0; i < li.length; i++) {
div = li[i].getElementsByClassName("custom-control-label")[0];
if (div.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
我在做什么错了?
答案 0 :(得分:0)
我为此提出了另一种更简单的方法...
function searchFunction(elm, list) {
var input = $("#input-search");
$(input).keyup(function() {
var searchTerms = $(this).val();
$('li').each(function() {
var hasMatch = searchTerms.length == 0 ||
$(this).text().toLowerCase().indexOf(searchTerms.toLowerCase()) > 0;
$(this).toggle(hasMatch);
});
});
}