如何通过JS为网站搜索栏添加商品筛选功能？

HTML 结构 #

先搭好基础页面结构，包含搜索框和商品列表：

<!-- 搜索输入框 -->
<input type="text" id="searchInput" placeholder="输入商品名称筛选">

<!-- 商品列表容器 -->
<div id="productList">
  <!-- 示例商品项，实际可通过后端渲染或动态生成 -->
  <div class="product-item" data-product-name="纯棉T恤">纯棉T恤 - 白色</div>
  <div class="product-item" data-product-name="牛仔裤">牛仔裤 - 修身款</div>
  <div class="product-item" data-product-name="运动鞋">运动鞋 - 透气款</div>
  <!-- 更多商品项... -->
</div>

CSS 样式 #

给商品项加基础样式，同时定义隐藏类：

.product-item {
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #eee;
  border-radius: 4px;
}

.hidden {
  display: none;
}

JavaScript 核心逻辑 #

监听搜索框的输入事件，实时筛选商品：

// 获取DOM元素
const searchInput = document.getElementById('searchInput');
const productItems = document.querySelectorAll('.product-item');

// 监听输入事件
searchInput.addEventListener('input', function() {
  // 获取输入值，转为小写做不区分大小写匹配
  const searchTerm = this.value.trim().toLowerCase();

  // 遍历所有商品项
  productItems.forEach(item => {
    // 从data属性获取商品名称，也可以直接取item.textContent.trim()
    const productName = item.dataset.productName.toLowerCase();
    
    // 判断是否匹配，匹配则显示，否则隐藏
    if (productName.includes(searchTerm)) {
      item.classList.remove('hidden');
    } else {
      item.classList.add('hidden');
    }
  });
});

关键说明 #

• 用data-product-name属性存储商品名称，比直接取文本更可靠（避免商品描述里的干扰内容）
• 转成小写实现不区分大小写的搜索，提升用户体验
• 监听input事件而非change事件，实现实时筛选，输入时立刻反馈
• 如果商品是动态加载的（比如从后端接口获取），只需要在商品渲染完成后重新获取productItems并绑定事件即可

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