如何使用AlpineJS根据输入值筛选HTML定义列表的DT/DD对

需求说明 #

我有以下HTML结构的搜索框和术语表：

<input type="search" placeholder="search">

<dl class="glossary">
      
  <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>
    
</dl>

需要用AlpineJS实现：当输入框的值包含在<dt>标签内容中时，显示对应的<dt>/<dd>组合；输入为空时显示所有内容。比如输入“fi”，仅显示第一个术语组。

解决方案 #

不需要动态生成列表，直接基于现有DOM结构，用AlpineJS的指令实现过滤：

基础实现版本 #

<div x-data="{ searchTerm: '' }">
  <input type="search" placeholder="search" x-model="searchTerm">

  <dl class="glossary">
    <div x-show="!searchTerm.toLowerCase() || $el.querySelector('dt').textContent.toLowerCase().includes(searchTerm.toLowerCase())">
      <dt>First</dt>
      <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    </div>

    <div x-show="!searchTerm.toLowerCase() || $el.querySelector('dt').textContent.toLowerCase().includes(searchTerm.toLowerCase())">
      <dt>Second</dt>
      <dd>Duis dui mauris, interdum sed velit ac, fermentum eleifend sem.</dd>
    </div>
  </dl>
</div>

优化复用版本 #

把匹配逻辑抽成方法，让代码更简洁易维护：

<div x-data="{ 
  searchTerm: '',
  // 定义匹配方法，接收dt元素判断是否符合搜索条件
  isMatch(dtEl) {
    const term = this.searchTerm.toLowerCase().trim();
    return !term || dtEl.textContent.toLowerCase().includes(term);
  }
}">
  <input type="search" placeholder="search" x-model="searchTerm">

  <dl class="glossary">
    <div x-show="isMatch($el.querySelector('dt'))">
      <dt>First</dt>
      <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    </div>

    <div x-show="isMatch($el.querySelector('dt'))">
      <dt>Second</dt>
      <dd>Duis dui mauris, interdum sed velit ac, fermentum eleifend sem.</dd>
    </div>
  </dl>
</div>

关键逻辑说明 #

• x-data="{ searchTerm: '' }"：初始化AlpineJS组件，声明存储搜索关键词的变量
• x-model="searchTerm"：将输入框的值与searchTerm双向绑定，实时同步输入内容
• x-show：根据表达式结果控制元素显示/隐藏：
  • 当搜索词为空时，所有术语组都显示
  • 转成小写后判断<dt>内容是否包含搜索词，实现大小写不敏感的模糊匹配
• $el：指代当前被指令绑定的元素（即包裹术语组的<div>），通过它获取内部的<dt>元素

内容的提问来源于stack exchange，提问作者Miguel Moura