Question

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

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

例如，如果我现在有一个包含3个li的ul。它只检查第一个而不是其余部分，导致过滤系统无效。

是否有人知道我如何改进我的代码以使其过滤所有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";

        }
    }
}

HTML / PHP

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

更改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>

Answer 1

即使一个UL的文字不匹配，您也隐藏了li。

使用querySelectorAll，Array.from和filter

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 = "";
}

Javascript ||通过UL过滤

1 个答案: