如何使用JavaScript基于JSON数据实现商品搜索过滤功能

1. 准备基础HTML结构 #

先在页面中添加搜索输入框和商品展示容器：

<!-- 搜索输入框 -->
<input type="search" id="searchInput" placeholder="输入商品关键词搜索（如i5 12400）">
<!-- 商品列表展示容器 -->
<div id="productContainer"></div>

2. 改造数据拉取逻辑 #

不要把接口返回的商品数据局限在fetch方法的作用域内，声明全局变量存储全量商品，避免每次搜索都重复发起请求。页面初始化完成后自动拉取数据，拉取成功后先渲染一次全量商品。

// 全局存储全量商品数据
let allProducts = [];
// 获取DOM元素
const searchInput = document.getElementById('searchInput');
const productContainer = document.getElementById('productContainer');

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  fetchData();
  // 绑定搜索输入监听，用input事件可以覆盖输入、粘贴、清空等所有输入场景
  searchInput.addEventListener('input', handleSearch);
});

const fetchData = async() => {
  try{
    const res = await fetch("./productos.json");
    allProducts = await res.json();
    // 初始渲染全量商品
    renderProducts(allProducts);
  } catch(error){
    console.log('数据加载错误:', error);
    productContainer.innerHTML = '<p>商品加载失败，请刷新页面重试</p>';
  }
}

3. 实现搜索过滤逻辑 #

过滤时统一将用户输入和商品匹配字段转为小写，避免大小写导致的匹配失败；同时匹配商品标题和描述两个字段，用户输入为空时直接返回全量商品。

const handleSearch = (e) => {
  // 获取用户输入，去除首尾空格并转小写
  const keyword = e.target.value.trim().toLowerCase();
  // 输入为空时渲染全量商品
  if (!keyword) {
    renderProducts(allProducts);
    return;
  }
  // 过滤匹配商品：标题或描述包含关键词即符合要求
  const filteredProducts = allProducts.filter(product => {
    return product.title.toLowerCase().includes(keyword) 
    || product.description.toLowerCase().includes(keyword);
  });
  // 渲染过滤后的结果
  renderProducts(filteredProducts);
}

4. 实现通用商品渲染函数 #

全量商品和搜索结果复用同一个渲染函数，每次渲染前先清空容器旧内容，没有匹配结果时展示提示文案。

const renderProducts = (products) => {
  // 清空容器旧内容
  productContainer.innerHTML = '';
  // 无匹配结果提示
  if (products.length === 0) {
    productContainer.innerHTML = '<p>没有找到相关商品，请换个关键词试试</p>';
    return;
  }
  // 遍历生成商品卡片
  products.forEach(product => {
    const card = document.createElement('div');
    card.className = 'product-card';
    card.innerHTML = `
      <img src="${product.imageUrl}" alt="${product.title}" class="product-img">
      <h3 class="product-title">${product.title}</h3>
      <p class="product-desc">${product.description}</p>
      <p class="product-price">¥${(product.price / 100).toFixed(2)}</p>
    `;
    productContainer.appendChild(card);
  });
}

注意：示例中价格做了除以100转元的处理，如果你存储的价格单位本身就是元，直接使用product.price即可，不需要做除法运算，后续可以自己给商品卡片加CSS样式调整展示效果。

可选进阶优化（后续练习可实现） #

• 增加输入防抖：用户停止输入300ms后再执行过滤，避免输入过程中频繁触发DOM渲染，提升性能
• 搜索结果高亮：将匹配到的关键词添加特殊样式标记，方便用户快速定位
• 多关键词匹配：支持空格分割多个关键词，同时命中多个词才返回结果，提升搜索精准度

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