Javascript JQuery嵌套列表筛选器-当父项为匹配项时显示所有子项

我有这个jQuery函数，它根据标签文本和文本框输入过滤列表

它需要根据匹配类型以两种不同的方式运行：

如果子项是匹配项，则显示父项。这很有效

如果父项匹配，则显示所有子项。那不行

小提琴：

var labels=$（'label'）；//缓存此文件以获得更好的性能
$（“#过滤器”）.keyup（函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis==“”）{
labels.parent（）.show（）；//显示所有lis
}否则{
标签。每个（函数（）{
var label=$（this）；//缓存此
var text=label.text（）.toLowerCase（）；
if（text.indexOf（valThis）>-1）{
label.parents（'li'）.show（）//显示祖先树上的所有li父级
}否则{
label.parent（）.hide（）；//隐藏当前li，因为它不匹配
}
});
};
});



父母1


孩子12


孩子3


项目4


项目5




项目6


项目7


项目4


项目8




我们需要相同的功能，经过数小时的搜索，我决定编写自己的函数

这就是它的工作原理：


第一个循环执行搜索，并根据是否找到匹配项设置每个项的显示属性。该函数通过将匹配项推入
匹配项
列表来记忆匹配项

第二个循环迭代每个匹配项，并检查匹配项的所有子项是否都隐藏，这反过来意味着只有父项是匹配项

如果所有子项都隐藏，则父项就是匹配项，我们希望让其所有项重新出现


它可以使用突出显示点击，但这是另一天


函数过滤器（输入选择器、数据选择器）{
让输入=document.getElementById（inputSelector）；
让filter=input.value.toUpperCase（）；
设ul=document.getElementById（dataSelector）；
让items=ul.getElementsByTagName（'li'）；
//特雷弗·梅肯
让匹配项=[]；
//例如：特雷弗·埃尔米特伦、多姆·莱门特·泽根/弗斯特肯
for（设i=0；i-1）{
currentItem.style.display=''；
匹配。推送（currentItem）；
}否则{
currentItem.style.display='none'；
}
}
//特雷弗劳夫：所有的元素都是爱的，都是爱的
for（设i=0；i


李斯特滤波器
Entwurfsmuster
贝斯皮尔斯切恩：“er”、“gof”、“method”、“lorem”/“ipsum”/“dolar”、“Erzeugungsmuster”



Erzeugungsmuster

抽象工厂（GoF）
建筑商（GoF）
工厂法（GoF）
多顿
对象池
原型（GoF）
单身（GoF）



Strukturmuster

适配器（GoF）
桥（GoF）
复合材料（GoF）
装饰师（GoF）
法萨德（GoF）
飞锤（GoF）
代理（GoF）



维哈尔滕斯马斯特

责任链（GoF）
指挥部（GoF）
拦截器
口译员（GoF）
迭代器（GoF）
调解人（GoF）
纪念品（GoF）
空对象
观察员（GoF）
协议栈
国家（GoF）
战略（GoF）
模板法（GoF）
访客（GoF）



安德烈·马斯特

商务代表
数据访问对象
依赖注入
扩展接口
流畅的界面
控制反转（IoC）
模型视图控制器（MVC）
模型视图演示者（MVP）
模型视图更新（MVU）
模型视图视图模型（MVVM）
登记处
存储库
服务定位器
线程池
转移目标



洛勒姆

ipsum

多洛