如何在JavaScript中实现多组复选框列表的独立搜索功能

需求背景 #

需要实现多组复选框列表，每组配备独立的搜索功能（类似电商侧边栏筛选效果），输入关键词仅过滤当前组内的选项，现有单组方案无法满足需求，需进行扩展适配。

实现代码 #

HTML 结构

每组搜索框与复选框通过容器和data-target属性绑定，确保分组隔离：

<div class="filter-group">
  <h3>品牌</h3>
  <input type="text" class="search-input" placeholder="搜索品牌..." data-target="brand-options">
  <div class="checkbox-options" id="brand-options">
    <label><input type="checkbox" value="brand1"> 品牌A</label>
    <label><input type="checkbox" value="brand2"> 品牌B</label>
    <label><input type="checkbox" value="brand3"> 品牌C</label>
    <label><input type="checkbox" value="brand4"> 品牌D</label>
  </div>
</div>

<div class="filter-group">
  <h3>价格区间</h3>
  <input type="text" class="search-input" placeholder="搜索价格..." data-target="price-options">
  <div class="checkbox-options" id="price-options">
    <label><input type="checkbox" value="price1"> 0-100元</label>
    <label><input type="checkbox" value="price2"> 100-300元</label>
    <label><input type="checkbox" value="price3"> 300-500元</label>
    <label><input type="checkbox" value="price4"> 500元以上</label>
  </div>
</div>

CSS 基础样式

提供基础布局与隐藏类，可根据需求自定义样式：

.filter-group {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.search-input {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.checkbox-options label {
  display: block;
  margin: 4px 0;
  cursor: pointer;
}

.checkbox-options .hidden {
  display: none;
}

JavaScript 核心逻辑

两种实现方式，适配静态与动态添加的分组：

静态分组写法（适用于固定数量的分组）

document.querySelectorAll('.search-input').forEach(input => {
  input.addEventListener('input', function() {
    const targetContainer = document.getElementById(this.dataset.target);
    const searchTerm = this.value.toLowerCase().trim();
    
    targetContainer.querySelectorAll('label').forEach(label => {
      const matches = label.textContent.toLowerCase().includes(searchTerm);
      label.classList.toggle('hidden', !matches);
    });
  });
});

动态分组写法（支持后续新增分组，无需重新绑定事件）

document.addEventListener('input', function(e) {
  if (!e.target.matches('.search-input')) return;
  
  const targetContainer = document.getElementById(e.target.dataset.target);
  const searchTerm = e.target.value.toLowerCase().trim();
  
  targetContainer.querySelectorAll('label').forEach(label => {
    const matches = label.textContent.toLowerCase().includes(searchTerm);
    label.classList.toggle('hidden', !matches);
  });
});

核心扩展要点 #

• 分组绑定：通过data-target属性将搜索框与对应复选框容器关联，确保搜索动作仅作用于当前组，实现隔离效果。
• 动态适配：事件委托写法无需为新增分组单独绑定事件，更适合动态生成的筛选面板。
• 性能优化：仅遍历当前组内的选项，避免全局DOM遍历，提升搜索响应速度。

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