用 input 事件实时筛选 DOM 列表，通过 textContent 匹配关键词控制显隐；避免 submit 导致刷新，不用 innerText 防 CSS 干扰，禁用 display: none 以保交互性，推荐添加 class 控制视觉隐藏。
直接用 JavaScript 遍历 DOM 元素 + input 事件监听就能实现，不需要框架或后端。
为什么不用 submit 或 form 提交？
纯前端筛选不涉及数据请求，submit 会触发页面刷新或跳转，反而打断体验。用 input 事件实时响应更自然——用户每敲一个字就过滤一次。
-
input比change更及时（后者只在失焦时触发） - 避免对
form绑定submit并调用event.preventDefault()多此一举 - 如果后续要加防抖，也得基于
input事件做
如何写一个基础的列表筛选逻辑？
假设有 <ul id="item-list"></ul> 包裹若干 <li>，每个 <li> 内容是纯文本或含 <span></span> 等子元素。核心是：获取输入值 → 遍历所有 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 会让元素完全脱离渲染流，其子元素（包括 <a></a>、<button></button>）无法点击。这不是 bug，是预期行为。
立即学习“前端免费学习笔记（深入）”；
- 若需保留可交互性（比如筛选后仍能点击某项触发详情），改用
visibility: hidden+height: 0+overflow: hidden组合，但要注意布局留白 - 更推荐做法：不隐藏，而是添加
class="filtered-out"，用 CSS 控制视觉隐藏（如opacity: 0.3; pointer-events: none;），这样 DOM 仍在，事件代理也有效 - 千万别用
remove()或innerHTML = ''清空再重写——会丢失绑定的事件监听器和状态
实际项目中，当列表超过几百项时，querySelectorAll + 每次遍历的性能会变明显；这时候就得考虑虚拟滚动或分页，但那是另一个问题了。
