Javascript | |通过UL过滤

我想构建一个搜索输入，过滤所有UL，并隐藏不包含搜索词的元素

目前，它会检查li元素是否包含搜索词，但不会循环所有li元素以检查搜索词是否命名

例如，如果我现在有一个ul，里面有3个li。它只检查第一个，不检查其余的，导致过滤系统失效

有人知道我如何改进代码，使其过滤所有li元素，并在不包含搜索词的情况下隐藏父ul吗？

Javascript

function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i, div;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    div = document.getElementById("partners");
    li = div.getElementsByTagName('li');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].parentElement.style.display = "";
        } else {
            li[i].parentElement.style.display = "none";

        }
    }
}

函数myFunction（）{
//声明变量
var输入、滤波器、ul、li、a、i、div；
输入=document.getElementById（'myInput'）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“合作伙伴”）；
li=div.getElementsByTagName（'li'）；
//循环浏览所有列表项，并隐藏与搜索查询不匹配的项
对于（i=0；i-1）{
li[i].parentElement.style.display=“”；
}否则{
li[i].parentElement.style.display=“无”；
}
}
}

HTML/PHP

联系人姓名：
公司名称：
国家：
电话号码：
业务：

更改PHP使代码正常工作：

            <div id="partners"> 
            <ul id="myUL">
                <?php foreach ($partners as $partner): ?>
                    <li class="partner" id="">
                        <a id="a" href="#">
                            <b>Contact name:</b><h3><?php echo $partner['name'] ?></h3><br>
                            <b>Company name:</b><h3><?php echo $partner['companyname'] ?></h3><br>
                            <b>Country:</b><h3><?php echo $partner['country'] ?></h3><br>
                            <b>Phonenumber:</b><h3><?php echo $partner['number'] ?></h3><br>
                            <b>Business:</b><h4><?php echo $partner['business'] ?></h4><br>
                        </a>
                    </li>
                <?php endforeach ?>
            </ul>
        </div>

您正在隐藏

UL

，即使其中一个

li

的文本不匹配

使用

querySelectorAll

，

数组。从
和
过滤器

var hasMatch = Array.from( document.querySelectorAll( "#partners ul li a") ).filter( function(el){
   return el.textContent.toUpperCase().includes(filter); 
}).length > 0

现在，如果
hasMatch
为0，则隐藏
UL

if ( hasMatch == 0 )
{
   document.querySelector( "#partners ul" ).style.display = "none";
}
else
{
   document.querySelector( "#partners ul" ).style.display = "";
}

您正在隐藏
UL
，即使其中一个
li
的文本不匹配

使用
querySelectorAll
，
数组。从
和
过滤器

var hasMatch = Array.from( document.querySelectorAll( "#partners ul li a") ).filter( function(el){
   return el.textContent.toUpperCase().includes(filter); 
}).length > 0

现在，如果
hasMatch
为0，则隐藏
UL

if ( hasMatch == 0 )
{
   document.querySelector( "#partners ul" ).style.display = "none";
}
else
{
   document.querySelector( "#partners ul" ).style.display = "";
}

嗨，你能再解释一下吗？我不确定如何将此应用于我的应用程序请具体说明需要澄清的部分。我已尝试在我的应用程序中实现您的代码，但它不会给我一个结果。这无助于我理解如何帮助你-但它不会给我一个结果。当我应用你的代码时，我的应用程序带有我的变量，我在输入字段中输入了一个名称，没有ul get隐藏。嗨，你能再解释一下吗？我不确定如何将此应用于我的应用程序请具体说明需要澄清的部分。我已尝试在我的应用程序中实现您的代码，但它不会给我一个结果。这无助于我理解如何帮助你-但它不会给我一个结果。当我应用你的代码时，我的应用程序带有我的变量，我在输入字段中输入一个名称，不隐藏ul get。