本文介绍如何在限制初始显示数量（如前50项）的前提下，通过 javascript 实现对全部列表项（含 css 隐藏项）的全文搜索，并仅高亮/显示匹配项，兼顾性能与用户体验。

本文介绍如何在限制初始显示数量（如前50项）的前提下，通过 javascript 实现对全部列表项（含 css 隐藏项）的全文搜索，并仅高亮/显示匹配项，兼顾性能与用户体验。

在构建长列表（如商品、文章或用户目录）时，常需平衡渲染性能与交互功能：一方面通过限制初始可见项数（如仅显示前 50 条）提升首屏加载速度；另一方面又希望搜索功能不局限于可见内容，而是覆盖完整数据集。原方案使用 display: none 直接隐藏后置项，导致 filter_shown() 函数仅遍历已渲染的 DOM 节点，无法触达被 CSS 隐藏的 <li> 元素——这是问题的核心症结。

解决的关键在于分离「数据可见性」与「DOM 存在性」：所有 <li> 元素必须保留在 DOM 中（不可用 display: none 批量移除），而通过 CSS 类（如 .hidden）控制显隐，使 JavaScript 能统一访问全部节点。

✅ 推荐实现方案

1. PHP 渲染：为超限项添加 hidden 类

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

✅ 注意：使用 htmlspecialchars() 防止 XSS；$i > 50 确保第 51 项起默认隐藏。

2. CSS 定义隐藏样式

li.hidden {
    display: none;
}

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((el, index) => {
            el.classList.toggle('hidden', index >= 50);
        });
        return;
    }

    // 搜索全部项，仅显示匹配项
    listItems.forEach(el => {
        const text = el.textContent || el.innerText;
        const matches = text.toLowerCase().includes(searchTerm);
        el.classList.toggle('hidden', !matches);
    });
});

⚠️ 关键注意事项

• 避免 keyup → 改用 input 事件：支持中文输入法（如拼音未上屏时触发）、粘贴、删除等全场景。
• 性能优化：对于超大列表（>5000 项），可考虑节流（throttle）或虚拟滚动，但百级列表无需额外处理。
• 无障碍友好：display: none 会从可访问树中移除元素，若需屏幕阅读器支持，请改用 visibility: hidden + aria-hidden 组合（本文聚焦基础功能，暂不展开）。
• 搜索精度：.includes() 比 indexOf() > -1 更语义化；如需模糊匹配（如拼音、分词），应引入专用库（如 Fuse.js）。

✅ 总结

该方案通过「类控制显隐 + 全量 DOM 遍历」解耦了展示逻辑与搜索逻辑，既维持了初始加载性能，又保障了搜索完整性。核心思想是：永远让所有数据项存在于 DOM 中，仅用 CSS 类切换视觉状态，JavaScript 则基于真实 DOM 节点执行条件判断——这是前端列表搜索的经典实践模式。