如何用JavaScript搜索CSS隐藏的列表项并显示匹配结果？

我希望列表默认只显示前50项，其余项通过点击“显示全部”按钮展开；同时搜索框能检索所有列表项（包括隐藏的）。目前已经实现了显示数量限制和基础搜索功能，但搜索仅能找到可见的50项中的匹配结果，请问如何修改才能让搜索覆盖所有项并显示匹配结果？

现有代码 #

JavaScript 搜索逻辑 #

function filter_shown(el) {
    var filter, ul, li, a, i, txtValue;
    input = document.getElementById('myInput');
    filter = el.value.toUpperCase();
    ul = el.parentElement.nextElementSibling
    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";
        }
    }
}

PHP + CSS 初始显示控制 #

<?php
foreach ($items as $item){
    if ($i++ == 50){ ?>
        <style>
            li{display:none;}
            li:nth-child(-n+50){display:list-item;}
        </style>

    <?php } ?>
    <li> <?php echo $item?> </li>
<?php } ?>

解决方案 #

1. 重构显示控制逻辑（PHP+CSS） #

把内嵌的style标签改成类控制，方便切换“有限显示”和“全部显示”状态：

<?php
// 输出基础样式
?>
<style>
.limited-list li { display: none; }
.limited-list li:nth-child(-n+50) { display: list-item; }
.limited-list.show-all li { display: list-item; }
</style>

<?php
// 给列表容器添加控制类
echo '<ul class="limited-list">';
foreach ($items as $item){
    echo '<li>' . $item . '</li>';
}
echo '</ul>';

// 添加显示全部按钮
echo '<button onclick="toggleShowAll()">显示全部</button>';
?>

配套的状态切换JS：

function toggleShowAll() {
    const listContainer = document.querySelector('.limited-list');
    listContainer.classList.toggle('show-all');
}

2. 修改搜索函数，强制控制显示状态 #

修改搜索逻辑，确保匹配项强制显示，不受初始CSS限制，同时支持清空搜索时恢复原状态：

function filter_shown(el) {
    const filter = el.value.toUpperCase();
    const listContainer = el.parentElement.nextElementSibling;
    const liItems = listContainer.getElementsByTagName('li');
    const isShowAll = listContainer.classList.contains('show-all');

    for (let i = 0; i < liItems.length; i++) {
        const link = liItems[i].getElementsByTagName("a")[0];
        const itemText = link.textContent || link.innerText;
        const isMatch = itemText.toUpperCase().indexOf(filter) > -1;

        if (isMatch) {
            // 匹配项强制显示，覆盖CSS设置
            liItems[i].style.display = "list-item";
        } else {
            // 不匹配项隐藏
            liItems[i].style.display = "none";
        }
    }

    // 搜索框清空时，恢复到原显示状态
    if (!filter) {
        for (let i = 0; i < liItems.length; i++) {
            liItems[i].style.display = ""; // 移除内联样式，让CSS类重新生效
        }
    }
}

核心原理 #

• 用CSS类控制初始显示状态，避免内嵌style的优先级冲突；
• 搜索时通过内联style.display强制控制匹配项显示，确保隐藏项中的匹配结果能正常展示；
• 搜索框清空时，移除内联样式，恢复到“有限显示”或“全部显示”的初始状态。

内容的提问来源于stack exchange，提问作者question