如何基于cars.json实现按名称、价格过滤的搜索筛选栏

1. 确认cars.json数据结构 #

先确保你的cars.json是标准数组格式，示例如下：

[
  {
    "id": 1,
    "name": "特斯拉 Model 3",
    "price": 231900,
    "brand": "特斯拉"
  },
  {
    "id": 2,
    "name": "比亚迪汉 EV",
    "price": 215800,
    "brand": "比亚迪"
  },
  {
    "id": 3,
    "name": "小鹏 P7",
    "price": 209900,
    "brand": "小鹏"
  },
  {
    "id": 4,
    "name": "大众朗逸",
    "price": 120900,
    "brand": "大众"
  }
]

2. 改造cars.js实现完整功能 #

以下是原生JavaScript实现的完整代码，包含数据拉取、实时过滤、结果渲染：

// 获取DOM元素
const searchInput = document.getElementById('car-search');
const priceMin = document.getElementById('price-min');
const priceMax = document.getElementById('price-max');
const carList = document.getElementById('car-list');

// 存储原始车辆数据，避免每次过滤重新请求
let allCars = [];

// 从JSON拉取数据
async function loadCars() {
  try {
    const res = await fetch('./cars.json');
    if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
    allCars = await res.json();
    renderCars(allCars); // 初始渲染全部车辆
  } catch (err) {
    carList.innerHTML = `<p class="error">加载失败：${err.message}</p>`;
  }
}

// 渲染车辆列表到页面
function renderCars(cars) {
  if (cars.length === 0) {
    carList.innerHTML = '<p>未找到匹配的车辆</p>';
    return;
  }

  carList.innerHTML = cars.map(car => `
    <div class="card">
      <h3>${car.name}</h3>
      <p>品牌：${car.brand}</p>
      <p class="price">${car.price.toLocaleString()} 元</p>
    </div>
  `).join('');
}

// 核心过滤逻辑
function filterCars() {
  const searchKeyword = searchInput.value.toLowerCase().trim();
  const min = parseInt(priceMin.value) || 0;
  const max = parseInt(priceMax.value) || Infinity;

  const filtered = allCars.filter(car => {
    // 名称模糊匹配
    const nameMatch = car.name.toLowerCase().includes(searchKeyword);
    // 价格区间匹配
    const priceMatch = car.price >= min && car.price <= max;
    return nameMatch && priceMatch;
  });

  renderCars(filtered);
}

// 绑定实时过滤事件
searchInput.addEventListener('input', filterCars);
priceMin.addEventListener('input', filterCars);
priceMax.addEventListener('input', filterCars);

// 页面加载时初始化数据
window.addEventListener('DOMContentLoaded', loadCars);

3. 配套HTML结构示例 #

如果需要HTML模板，可参考以下结构（和上面JS的ID对应）：

<div class="search-bar">
  <input type="text" id="car-search" placeholder="搜索车辆名称">
  <div class="price-range">
    <input type="number" id="price-min" placeholder="最低价格">
    <span>~</span>
    <input type="number" id="price-max" placeholder="最高价格">
  </div>
</div>
<div id="car-list" class="car-grid"></div>

关键细节说明 #

• 性能优化：只在页面加载时拉取一次cars.json，后续过滤直接操作内存中的数据
• 容错处理：对fetch请求失败、价格输入非数字的情况做了兼容
• 实时响应：监听输入框的input事件，用户输入时立即更新过滤结果
• 用户体验：无匹配结果时显示提示文本，价格默认设为0和无穷大（即不限制）

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