javascript单击一个文本，它将过滤一个隐藏列表以弹出

我想点击一个单词，然后它将作为一个过滤器来显示隐藏列表。 我的代码是，但它不工作，有人能告诉我我的脚本有什么问题吗。 事实上，这就是我正在寻找的：在网页中，有一些隐藏列表，有一些打开列表，当我单击打开列表上的一个项目时，它将充当过滤器来过滤隐藏列表，并弹出过滤列表：

我的电话簿
阿黛尔
艾格尼斯
比利
鲍勃






函数myFunction（）{
var x=document.getElementById（'myDIV'）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
var输入1，输入，滤波器，ul，li，a，i；
input1=document.getElementById（“myInput”）；
input=input1.getElementByTagName（“li”）；
filter=input.innerHTML.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

使用querySelectorAll创建快捷方式

将单击处理程序添加到第一个LIs而不是div

保存单击的名称以切换显示

将LIs包装在UL中以创建有效的HTML

var saveFilter=”“；
window.onload=函数（）{
var触发器=document.queryselectoral（#myInput>ul>li）；
对于（var i=0；ili）；
对于（i=0；i-1？”：“无”；
}
}
}
}

我的电话簿

阿黛尔
艾格尼斯
比利
鲍勃

非常感谢，它很有效。如果我想在弹出窗口中显示过滤后的内容

请点击F12并修复控制台中的错误-getElementsByTagname是pluralUse查询选择器：

input=input1.querySelector（“li”）