用于过滤三个不同列表的Javascript函数

我对javascript一无所知，请原谅我的无知

我希望根据文本框中键入的内容筛选三个不同的列表。我的函数仅对第一个列表进行排序，并且仅当我“按Id获取元素”而不是类时

我的想法是按类获取元素，从而过滤所有三个列表，但这样做不太有效。我能做什么

Javascript:

 <script>
    function filterList() {
        
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById('searchCombo');
        filter = input.value.toUpperCase();
        ul = document.getElementsByClassName("drugList");
        li = ul.getElementsByTagName('li');

        
        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>

函数filterList（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（'searchCombo'）；
filter=input.value.toUpperCase（）；
ul=document.getElementsByClassName（“药单”）；
li=ul.getElementsByTagName（'li'）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

HTML列表：

<input type="text" id="searchCombo" onkeyup="filterList()" placeholder="Search for names..">

<ul ID="list1" class="drugList">
    <li><a href="#">List 1 element 1</a></li>
    <li><a href="#">List 1 element 2</a></li>
    <li><a href="#">List 1 element 3</a></li>
</ul>

<ul ID="list2" class="drugList">
    <li><a href="#">List 2 element 1</a></li>
    <li><a href="#">List 2 element 2</a></li>
    <li><a href="#">List 2 element 3</a></li>
</ul>

<ul ID="list3" class="drugList">
    <li><a href="#">List 3 element 1</a></li>
    <li><a href="#">List 3 element 2</a></li>
    <li><a href="#">List 3 element 3</a></li>
</ul>

我建议您使用，以过滤drugList类中的li元素。然后迭代元素：

const nothingFound=document.querySelector（'.nothingFound'）；
nothingFound.style.display=“无”；
const searchCombo=document.getElementById（'searchCombo'）；
searchCombo.addEventListener（“keyup”，（e）=>{
const{value}=e.target；
const liElements=Array.from（document.queryselectoral（“.drugList li”）；
让计数=0；
liElements.forEach（li=>{
li.style.display=“无”
if（li.textContent.toLowerCase（）.includes（value.toLowerCase（）））{
li.style.display=“”；
++计数；
}
});
nothingFound.style.display=计数>0？“无”：“；
});
















在这个类别中找不到任何东西
我不确定这个答案有多大价值，它借用了@lissettdm的答案，我写它主要是为了看看我会写什么。我把它贴在这里，以防有人感兴趣


const select\u all=（选择器，被选择器=文档）=>
from（selectee.querySelectorAll（selector））；
const hide_item=item=>item.style.display='none'；
const show_item=item=>item.style.display=''；
const item_text=item=>item.textContent.toLowerCase（）+“”+item.dataset.keywords；
const compare=text=>item=>item_text（item）。包括（text）；
const具有\u class=class\u name=>item=>item.className.includes（class\u name）；
const not\u拥有\u class=class\u name=>item=>！具有类别（类别名称）（项目）；
constboth=（pred_a，pred_b）=>item=>pred_a（item）和&pred_b（item）；
const filter_list=text=>list=>{
const lis=选择全部（“li”，列表）；
让to_show=lis.filter（两者（非_has_class（'none'）、compare（text））；
if（to_show.length==0）
to_show=lis.filter（具有_类（'none'））；
lis.forEach（隐藏项目）；
显示每个项目（显示项目）；
};
常量过滤器=（事件）=>
选择所有（“.drugList”）。forEach(
过滤器列表（（事件？.target？.value |？''）.toLowerCase（））
);
document.getElementById（'searchCombo'）。addEventListener（“keyup”，过滤器）；
过滤器（）





在该类别中找不到任何内容





在该类别中找不到任何内容





在该类别中找不到任何内容
您需要在
ul上循环并单独处理它们。或者您可以
查询选择所有（'.drugList li'）
并立即处理所有lis。非常感谢您的帮助，它工作得非常好！如果输入与ul中的任何li元素不匹配，是否有办法添加“此类别中未找到任何内容”？有没有可能在每个li中添加不可见的额外关键字？是的，有可能，我编辑了我的答案。这正是我想要的！非常感谢你！关于我的第二个问题，其中包含可以搜索的不可见的额外关键字，我只需输入字体大小为0的关键字
在这里列出1个元素1个额外的可搜索关键字
也许有一个更优雅的解决方案，但它是有效的。@suverenia，我的建议将包含在编辑中。（虽然我不知道每种方法对SEO和类似的事情都有什么作用。）