本文介绍如何借助 Alpine.js 的 x-watch 和 x-ref 功能，对 HTML 定义列表（）中的 / 项进行基于输入值的动态过滤，支持大小写不敏感匹配，并自动显示匹配项及其对应的描述内容。
本文介绍如何借助 alpine.js 的 `x-watch` 和 `x-ref` 功能，对 html 定义列表（`
- `）中的 `
- `/`
- ` 项进行基于输入值的动态过滤，支持大小写不敏感匹配，并自动显示匹配项及其对应的描述内容。
在构建术语表、词汇表或 FAQ 页面时，常需为
- 列表添加搜索功能。与传统循环渲染（如 x-for + 数组数据）不同，本方案直接操作现有 DOM 结构，无需预先将列表转为 JavaScript 数据——完美适配已静态编写好的语义化 HTML。
- 标签并检查其文本是否包含当前搜索词；若匹配，则显示该
- 及其紧随其后的
- （即“成对显示”），其余元素隐藏。
以下是完整可运行代码：
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.7/dist/cdn.min.js"></script><div x-data="filter"> <input type="search" placeholder="search terms..." x-model="pattern"><dl class="glossary" x-ref="deflist"> <dt>First</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd> <dt>Second</dt> <dd>Duis dui mauris, interdum sed velit ac, fermentum eleifend sem.</dd> <dt>AlpineJS</dt> <dd>A rugged, lightweight JavaScript framework for composing behavior directly in your markup.</dd> </dl> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('filter', () => ({ pattern: '', init() { this.$watch('pattern', (val) => { const normalizedPattern = val?.toLowerCase().trim() || ''; let showNextDD = false; for (const el of this.$refs.deflist.children) { if (el.nodeName === 'DT') { const matches = normalizedPattern === '' || el.textContent.toLowerCase().includes(normalizedPattern); el.style.display = matches ? 'block' : 'none'; showNextDD = matches; } else if (el.nodeName === 'DD') { el.style.display = showNextDD ? 'block' : 'none'; } } }); } })); }); </script>✅ 关键特性说明：
- 大小写不敏感：统一调用 .toLowerCase() 进行比对；
-
空搜索全显：当输入为空时，所有
- /
- 恢复显示（提升用户体验）；
-
严格顺序依赖：算法假设
- 总紧跟对应
- ，符合 HTML 规范中
- 的语义结构；
- 零侵入 DOM：不修改原始 HTML 结构，仅通过 display 控制可见性，保留所有样式与语义。
⚠️ 注意事项：
- 若
- 中存在其他节点（如注释、文本节点或 <script>），建议在循环中增加 el.nodeType === Node.ELEMENT_NODE 判断以增强健壮性； </script>
- 如需高亮搜索关键词，可在 textContent 替换逻辑中扩展（需重建 DOM 片段）；
- 生产环境建议将内联脚本移至外部文件，并启用 Alpine 的 defer 或模块化加载策略。
该方案简洁高效，充分发挥了 Alpine.js “渐进增强”的设计哲学——无需重写列表结构，即可为静态语义化 HTML 注入交互能力。
核心思路是：监听搜索输入框（x-model="pattern"）的变化，遍历
- 下所有子元素，识别
- 标签并检查其文本是否包含当前搜索词；若匹配，则显示该
