16. 搜索、筛选、排序与分页

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

搜索产品

分类

排序

三、知识点提醒

把筛选条件集中在 `state` 对象里，后期更好维护。
排序前复制数组，避免直接修改原始数据。
分页计算核心是 `slice(start, end)`。

四、练习建议

增加价格区间筛选。
把当前筛选条件同步到 URL 参数。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/16-filter-search-sort.js，下面同步展示，方便学习和复制。

// 页面 16：搜索、筛选、排序、分页
const catalog = [
  { name: 'Classic Deck', type: 'decking', price: 58 },
  { name: 'Capped Deck', type: 'decking', price: 92 },
  { name: 'White Fluted Panel', type: 'panel', price: 80 },
  { name: 'Birch Wall Panel', type: 'panel', price: 84 },
  { name: 'Privacy Fence', type: 'fence', price: 68 },
  { name: 'Garden Fence', type: 'fence', price: 61 },
  { name: 'Teak Deck', type: 'decking', price: 76 }
];

const state = { keyword: '', type: 'all', sort: 'default', page: 1, pageSize: 4 };
const listEl = document.querySelector('#p16-list');
const pageEl = document.querySelector('#p16-page');

function queryProducts() {
  let result = [...catalog];
  const keyword = state.keyword.toLowerCase();

  if (keyword) {
    result = result.filter((item) => item.name.toLowerCase().includes(keyword));
  }
  if (state.type !== 'all') {
    result = result.filter((item) => item.type === state.type);
  }
  if (state.sort === 'price-asc') {
    result.sort((a, b) => a.price - b.price);
  }
  if (state.sort === 'price-desc') {
    result.sort((a, b) => b.price - a.price);
  }

  return result;
}

function renderCatalog() {
  const result = queryProducts();
  const totalPages = Math.max(1, Math.ceil(result.length / state.pageSize));
  state.page = Math.min(state.page, totalPages);
  const start = (state.page - 1) * state.pageSize;
  const current = result.slice(start, start + state.pageSize);

  listEl.innerHTML = current.map((item) => `
    <article class="item-card"><h4>${item.name}</h4><p>${item.type} · $${item.price}</p></article>
  `).join('') || '<p>没有找到匹配产品。</p>';
  pageEl.textContent = `${state.page} / ${totalPages}`;
}

['keyword', 'type', 'sort'].forEach((key) => {
  document.querySelector(`#p16-${key}`).addEventListener('input', (event) => {
    state[key] = event.target.value;
    state.page = 1;
    renderCatalog();
  });
});

document.querySelector('#p16-prev').addEventListener('click', () => { state.page -= 1; if (state.page < 1) state.page = 1; renderCatalog(); });
document.querySelector('#p16-next').addEventListener('click', () => { state.page += 1; renderCatalog(); });
renderCatalog();