index.html里如何实现简单的搜索筛选功能？-html教程-PHP中文网

用 input 事件实时筛选 DOM 列表，通过 textContent 匹配关键词控制显隐；避免 submit 导致刷新，不用 innerText 防 CSS 干扰，禁用 display: none 以保交互性，推荐添加 class 控制视觉隐藏。

index.html里如何实现简单的搜索筛选功能？

直接用 JavaScript 遍历 DOM 元素 + input 事件监听就能实现，不需要框架或后端。

为什么不用 submit 或 form 提交？

纯前端筛选不涉及数据请求，submit 会触发页面刷新或跳转，反而打断体验。用 input 事件实时响应更自然——用户每敲一个字就过滤一次。

input 比 change 更及时（后者只在失焦时触发）
避免对 form 绑定 submit 并调用 event.preventDefault() 多此一举
如果后续要加防抖，也得基于 input 事件做

如何写一个基础的列表筛选逻辑？

假设有

包裹若干

，每个

内容是纯文本或含等子元素。核心是：获取输入值 → 遍历所有 li → 根据 textContent 是否包含关键词决定显隐。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

const searchInput = document.getElementById('search-input');
const listItems = document.querySelectorAll('#item-list li');

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.trim();
  listItems.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = keyword === '' || text.includes(keyword.toLowerCase()) 
      ? 'block' 
      : 'none';
  });
});

必须用 textContent 而非 innerText，后者受 CSS 影响（比如 display: none 的子元素内容可能被忽略）
trim() 防止空格导致匹配失败
大小写统一转小写，避免 "Apple" 不匹配 "apple"

常见错误：搜索后点不到隐藏项里的链接或按钮？

因为 display: none 会让元素完全脱离渲染流，其子元素（包括、）无法点击。这不是 bug，是预期行为。

若需保留可交互性（比如筛选后仍能点击某项触发详情），改用 visibility: hidden + height: 0 + overflow: hidden 组合，但要注意布局留白
更推荐做法：不隐藏，而是添加 class="filtered-out"，用 CSS 控制视觉隐藏（如 opacity: 0.3; pointer-events: none;），这样 DOM 仍在，事件代理也有效
千万别用 remove() 或 innerHTML = '' 清空再重写——会丢失绑定的事件监听器和状态

实际项目中，当列表超过几百项时，querySelectorAll + 每次遍历的性能会变明显；这时候就得考虑虚拟滚动或分页，但那是另一个问题了。