Javascript 在具有子列表的元素列表中搜索/筛选

我对JS不是非常熟悉，我想按给定的字符串过滤元素列表。 本网站展示了我想要实现的一个示例：

除了这个功能之外，我还希望能够基于子列表过滤列表。 假设我有一个这样的主列表：

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li id="tt"><a href="#">Agnes</a>
      <ul>
          <li><a href="#">Test</a></li>
          <li><a href="#">Cake</a></li>
      </ul>
  </li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

我在搜索栏中输入“Agnes”；然后我希望“Agnes”-元素出现，并显示其所有子元素。如果我搜索“Test”，我想显示“Agnes”-元素以及“Test”-元素。 如果可能的话，我不想展示“Agnes”的其他孩子（so f.e.Cake），或者（更好的是）我想展示所有的孩子，但要标记在颜色中找到的一个。所以最终的结果是这样的：

我尝试在网站上修改代码，如下所示：

* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
#李美儿{
边框：1px实心#ddd；
页边距顶部：-1px；/*防止双边框*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}
我的电话簿














函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i如果html中的（txtValue.toUpperCase（）.indexOf（filter）在javascript中为每个要进入数组的li项设置一个id，然后在javascript中使用document.querySelectorAll（'id name'）创建该数组。从技术上讲，首先是一个节点列表，但可以使用array.from（节点列表）创建一个数组
这把小提琴可能很接近你想要的东西：

为此，我创建了一个表示DOM层次结构的扁平结构（嵌套的
/
列表），然后在输入值更改时执行以下操作：


删除任何现有的“匹配”样式
过滤展开结构以与值（标签的文本内容）匹配
将“匹配”样式应用于与值匹配的元素
太棒了，谢谢！有没有办法隐藏与搜索词不匹配的每个条目？当然，我更新了小提琴，将隐藏样式应用于所有元素，并有选择地只显示其值或父值与搜索词匹配的元素：非常感谢！我能够修改您的解决方案，现在它显示列表中的每个元素如果在该列表中找到一个元素（请参见此处：），那么现在它完全按照我的要求工作。如果我能以某种方式回报您，请让我知道！