如何用 JavaScript 实现多标签内容的模糊搜索过滤

多标签内容的模糊搜索过滤是前端交互中非常实用的功能，常见于商品筛选、文章检索、用户列表查询等场景，用户可以通过输入关键词，快速筛选出同时匹配多个标签或者包含关键词的内容。

功能需求分析

我们要实现的功能核心包含三个部分：

• 页面展示多个带有标签的内容项，每个内容项可以关联多个标签
• 提供搜索输入框，用户输入关键词后可以触发过滤逻辑
• 过滤规则支持模糊匹配，既可以匹配内容项的标题、描述，也可以匹配内容项关联的标签，最终只展示符合匹配条件的内容项

基础HTML结构搭建

首先我们需要搭建基础的页面结构，包含搜索输入框和内容列表区域，每个内容项需要存储对应的标签信息，这里我们通过自定义属性data-tags来存储标签列表，多个标签用逗号分隔。

<div class="search-container">
  <input type="text" id="searchInput" placeholder="输入关键词搜索，支持模糊匹配标签和内容">
</div>
<div class="content-list" id="contentList">
  <div class="content-item" data-tags="前端,JavaScript,教程">
    <h3 class="item-title">JavaScript基础入门教程</h3>
    <p class="item-desc">适合零基础学习JavaScript的入门课程，涵盖语法、DOM操作等内容</p>
    <div class="item-tags">
      <span class="tag">前端</span>
      <span class="tag">JavaScript</span>
      <span class="tag">教程</span>
    </div>
  </div>
  <div class="content-item" data-tags="前端,CSS,布局">
    <h3 class="item-title">CSS Flex布局实战</h3>
    <p class="item-desc">讲解Flex布局的核心属性，通过案例演示常见布局实现方式</p>
    <div class="item-tags">
      <span class="tag">前端</span>
      <span class="tag">CSS</span>
      <span class="tag">布局</span>
    </div>
  </div>
  <div class="content-item" data-tags="后端,Node.js,接口">
    <h3 class="item-title">Node.js接口开发指南</h3>
    <p class="item-desc">使用Node.js搭建RESTful接口，包含路由、中间件、数据库操作等内容</p>
    <div class="item-tags">
      <span class="tag">后端</span>
      <span class="tag">Node.js</span>
      <span class="tag">接口</span>
    </div>
  </div>
  <div class="content-item" data-tags="前端,JavaScript,框架">
    <h3 class="item-title">Vue3框架核心原理</h3>
    <p class="item-desc">深入解析Vue3的响应式系统、虚拟DOM、组件通信等核心实现</p>
    <div class="item-tags">
      <span class="tag">前端</span>
      <span class="tag">JavaScript</span>
      <span class="tag">框架</span>
    </div>
  </div>
</div>

基础样式调整

为了让页面展示更清晰，我们添加一些基础样式，区分搜索区域、内容项和标签的样式。

.search-container {
  margin: 20px 0;
  padding: 0 10px;
}
#searchInput {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.content-list {
  padding: 0 10px;
}
.content-item {
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.content-item.hide {
  display: none;
}
.item-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}
.item-desc {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
.item-tags {
  display: flex;
  gap: 8px;
}
.tag {
  padding: 2px 8px;
  background-color: #f0f0f0;
  border-radius: 3px;
  font-size: 12px;
  color: #888;
}

JavaScript核心逻辑实现

核心逻辑分为三个步骤：监听搜索输入事件、提取每个内容项的匹配字段、执行模糊匹配并控制内容项显示隐藏。

1. 获取DOM元素并监听输入事件

首先获取搜索输入框和内容项列表，给搜索输入框绑定input事件，每次输入变化都触发过滤逻辑。

// 获取搜索输入框
const searchInput = document.getElementById('searchInput');
// 获取所有内容项
const contentItems = document.querySelectorAll('.content-item');

// 监听输入事件，触发过滤逻辑
searchInput.addEventListener('input', function() {
  // 获取输入的关键词，转为小写，去除首尾空格
  const keyword = this.value.trim().toLowerCase();
  // 执行过滤
  filterContent(keyword);
});

2. 实现过滤核心函数

过滤函数需要遍历所有内容项，对每个内容项提取标题、描述、标签三个维度的内容，只要任意一个维度包含关键词，就显示该内容项，否则隐藏。

function filterContent(keyword) {
  // 如果关键词为空，显示所有内容项
  if (!keyword) {
    contentItems.forEach(item => {
      item.classList.remove('hide');
    });
    return;
  }
  // 遍历每个内容项
  contentItems.forEach(item => {
    // 获取标题文本
    const title = item.querySelector('.item-title').textContent.toLowerCase();
    // 获取描述文本
    const desc = item.querySelector('.item-desc').textContent.toLowerCase();
    // 获取标签属性，分割为标签数组，转为小写
    const tags = item.dataset.tags.toLowerCase().split(',');
    
    // 判断标题、描述、标签中是否包含关键词
    const matchTitle = title.includes(keyword);
    const matchDesc = desc.includes(keyword);
    const matchTag = tags.some(tag => tag.includes(keyword));
    
    // 任意一项匹配就显示，否则隐藏
    if (matchTitle || matchDesc || matchTag) {
      item.classList.remove('hide');
    } else {
      item.classList.add('hide');
    }
  });
}

3. 优化：支持多关键词空格分隔匹配

如果需要支持用户输入多个关键词，用空格分隔，要求内容项同时匹配所有关键词，可以调整过滤逻辑，将关键词按空格分割为数组，再逐一校验。

function filterContent(keyword) {
  // 分割多个关键词，过滤空字符串
  const keywords = keyword.split(/s+/).filter(k => k);
  // 如果关键词为空，显示所有内容项
  if (keywords.length === 0) {
    contentItems.forEach(item => {
      item.classList.remove('hide');
    });
    return;
  }
  // 遍历每个内容项
  contentItems.forEach(item => {
    // 获取标题文本
    const title = item.querySelector('.item-title').textContent.toLowerCase();
    // 获取描述文本
    const desc = item.querySelector('.item-desc').textContent.toLowerCase();
    // 获取标签属性，分割为标签数组，转为小写
    const tags = item.dataset.tags.toLowerCase().split(',');
    
    // 校验是否所有关键词都匹配
    const allMatch = keywords.every(kw => {
      const matchTitle = title.includes(kw);
      const matchDesc = desc.includes(kw);
      const matchTag = tags.some(tag => tag.includes(kw));
      return matchTitle || matchDesc || matchTag;
    });
    
    // 所有关键词都匹配就显示，否则隐藏
    if (allMatch) {
      item.classList.remove('hide');
    } else {
      item.classList.add('hide');
    }
  });
}

功能扩展建议

上述实现是基础版本，还可以根据需求做进一步扩展：

• 添加高亮功能，将匹配到的关键词在标题、描述、标签中高亮显示
• 增加标签筛选区域，用户可以点击标签快速添加筛选条件，同时支持标签和搜索框联动
• 添加防抖处理，避免用户输入过快时频繁触发过滤逻辑，提升性能
• 支持更复杂的匹配规则，比如正则匹配、拼音匹配等

总结

实现多标签内容的模糊搜索过滤核心在于明确匹配维度，将内容项的标题、描述、标签统一提取后和输入关键词做包含判断，通过控制内容项的显示隐藏类即可实现过滤效果。整个逻辑不依赖第三方库，原生JavaScript即可完成，适配大多数前端项目的需求，开发者可以根据实际场景调整匹配规则和优化交互体验。

JavaScript模糊搜索多标签过滤前端交互修改时间：2026-07-11 15:45:48