嗨，我来帮你搞定这个高级搜索的过滤和重置功能！下面我会一步步给你讲清楚怎么实现，代码都给你写好，直接用就行~

一、基础HTML结构 #

首先咱们得把搜索表单、输入字段、操作按钮和结果列表的结构搭起来，示例如下：

<!-- 高级搜索标签页 -->
<div class="advanced-search-tab">
  <form id="advancedSearchForm">
    <div class="search-fields">
      <div class="field-group">
        <label for="name">名称:</label>
        <input type="text" id="name" placeholder="输入名称关键词">
      </div>
      <div class="field-group">
        <label for="category">分类:</label>
        <input type="text" id="category" placeholder="输入分类关键词">
      </div>
      <div class="field-group">
        <label for="status">状态:</label>
        <select id="status">
          <option value="">全部</option>
          <option value="active">活跃</option>
          <option value="inactive">禁用</option>
        </select>
      </div>
    </div>
    <div class="search-actions">
      <button type="button" id="searchBtn">搜索</button>
      <button type="button" id="resetBtn">重置</button>
    </div>
  </form>

  <!-- 结果列表 -->
  <ul id="resultList">
    <li data-name="产品A" data-category="电子产品" data-status="active">产品A - 电子产品 (活跃)</li>
    <li data-name="产品B" data-category="家居用品" data-status="inactive">产品B - 家居用品 (禁用)</li>
    <li data-name="产品C" data-category="电子产品" data-status="active">产品C - 电子产品 (活跃)</li>
    <li data-name="产品D" data-category="办公设备" data-status="active">产品D - 办公设备 (活跃)</li>
  </ul>
</div>

这里我用data-*属性把列表项的对应字段存起来，方便后续过滤匹配。

二、核心JavaScript逻辑 #

接下来就是实现搜索过滤和重置的功能了，咱们分两块来写：

1. 搜索过滤功能 #

点击搜索按钮时，获取所有输入字段的值，然后遍历列表项，检查是否匹配所有非空的搜索条件：

// 获取DOM元素
const searchBtn = document.getElementById('searchBtn');
const resetBtn = document.getElementById('resetBtn');
const resultList = document.getElementById('resultList');
const listItems = Array.from(resultList.querySelectorAll('li'));
// 保存原始列表状态，方便重置时恢复
const originalItems = [...listItems];

// 搜索过滤逻辑
searchBtn.addEventListener('click', () => {
  // 获取所有搜索字段的值
  const nameKeyword = document.getElementById('name').value.trim().toLowerCase();
  const categoryKeyword = document.getElementById('category').value.trim().toLowerCase();
  const statusValue = document.getElementById('status').value;

  // 过滤列表项
  const filteredItems = originalItems.filter(item => {
    // 匹配名称（如果输入了关键词）
    const matchesName = nameKeyword ? item.dataset.name.toLowerCase().includes(nameKeyword) : true;
    // 匹配分类（如果输入了关键词）
    const matchesCategory = categoryKeyword ? item.dataset.category.toLowerCase().includes(categoryKeyword) : true;
    // 匹配状态（如果选择了非空选项）
    const matchesStatus = statusValue ? item.dataset.status === statusValue : true;

    // 只有所有条件都满足才保留
    return matchesName && matchesCategory && matchesStatus;
  });

  // 更新列表显示
  resultList.innerHTML = '';
  filteredItems.forEach(item => resultList.appendChild(item));
});

2. 重置功能 #

点击重置按钮时，清空所有输入字段，然后恢复原始的列表内容：

// 重置逻辑
resetBtn.addEventListener('click', () => {
  // 清空所有输入字段
  document.getElementById('name').value = '';
  document.getElementById('category').value = '';
  document.getElementById('status').value = '';

  // 恢复原始列表
  resultList.innerHTML = '';
  originalItems.forEach(item => resultList.appendChild(item));
});

三、补充说明 #

• 如果你的列表项是动态渲染的（比如从接口获取），记得在数据加载完成后再保存originalItems，避免找不到元素。
• 要是需要精确匹配而不是模糊匹配，把includes()改成===就行。
• 可以根据需求扩展更多搜索字段，逻辑都是一样的：获取字段值，添加对应的匹配条件。

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