本文介绍如何在限制初始显示数量（如前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' : '';
?>
<li class="<?php echo htmlspecialchars($hiddenClass); ?>">
<?php echo htmlspecialchars($item); ?>
</li>
<?php } ?>✅ 注意：使用
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 节点执行条件判断——这是前端列表搜索的经典实践模式。
