本文介绍一种实用的前端搜索方案：在列表仅默认显示前50项的前提下，通过 javascript 实现全局搜索（包括被 css 隐藏的后续项），并动态展示所有匹配项，兼顾性能与用户体验。

本文介绍一种实用的前端搜索方案：在列表仅默认显示前50项的前提下，通过 javascript 实现全局搜索（包括被 css 隐藏的后续项），并动态展示所有匹配项，兼顾性能与用户体验。

在构建长列表（如商品、文章或用户目录）时，常采用“分页式懒加载”策略——例如仅渲染前 50 条，其余用 display: none 隐藏，再通过“显示全部”按钮展开。但此时若用户使用搜索框输入关键词，原生 DOM 遍历（如 getElementsByTagName('li')）仅作用于当前可见节点，导致隐藏项中的匹配结果无法被检索和呈现。

解决核心在于解耦“初始可见状态”与“搜索可见逻辑”：不应依赖 display: none 的硬性样式控制，而应通过 CSS 类（如 .hidden）统一管理隐藏状态，并在搜索时动态增删该类，实现精准控制。

✅ 推荐实现步骤

1. PHP 渲染：按序标记隐藏状态

<?php $i = 0;
foreach ($items as $item) {
    $i++;
    $hiddenClass = $i > 50 ? 'hidden' : '';
?>
    

✅ 使用 htmlspecialchars() 防止 XSS；$i > 50 确保第 51 项起默认带 .hidden 类。

2. CSS 定义隐藏样式

li.hidden {
    display: none;
}

⚠️ 注意：避免使用 li { display: none; } + :nth-child() 覆盖，因后者在 DOM 动态变化后易失效。

3. JavaScript 搜索逻辑（原生写法，无需 jQuery）

document.getElementById('myInput').addEventListener('input', function () {
    const searchTerm = this.value.trim().toLowerCase();
    const listItems = document.querySelectorAll('li');

    if (searchTerm === '') {
        // 恢复初始状态：前50项可见，其余隐藏
        listItems.forEach((li, index) => {
            li.classList.toggle('hidden', index >= 50);
        });
        return;
    }

    // 全局搜索：匹配则显示，否则隐藏
    listItems.forEach(li => {
        const text = li.textContent?.trim().toLowerCase() || '';
        li.classList.toggle('hidden', !text.includes(searchTerm));
    });
});

? 关键设计说明

• input 事件替代 keyup：支持粘贴、语音输入等场景，响应更及时；
• includes() 替代 search()：语义清晰、兼容性好，且避免正则特殊字符问题；
• 初始状态可恢复：清空搜索框时，自动还原为“仅显示前 50 项”，符合用户预期；
• 无性能陷阱：querySelectorAll 一次性获取全部 <li>（含隐藏项），确保搜索覆盖全量数据。

? 注意事项

• 若列表项含 HTML 标签（如 <strong></strong>），textContent 会忽略标签结构，更安全；若需富文本匹配，改用 innerText 并注意浏览器差异；
• 对超大列表（>10,000 项），建议结合虚拟滚动或服务端搜索，避免客户端卡顿；
• “显示全部”按钮逻辑只需一行：document.querySelectorAll('li').forEach(el => el.classList.remove('hidden'));

此方案以最小侵入性升级原有逻辑，既保持初始加载性能，又赋予搜索完整语义能力，是内容型列表交互的经典实践。