js 带搜索的商品分页示例

在JavaScript中实现商品分页并带有搜索功能，通常会结合前端框架如React、Vue或Angular，以及后端API交互。这里是一个简单的示例，假设我们有一个数组模拟商品数据，前端用JavaScript处理：

// 模拟商品数据
const products = [
  { id: 1, name: '商品A', category: '电子产品' },
  // ...更多产品
];

// 搜索函数
function searchProducts(keyword) {
  return products.filter(product => product.name.includes(keyword));
}

// 分页函数
function paginate(products, pageSize, currentPage) {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return products.slice(startIndex, endIndex);
}

// 示例
let keyword = '';
let currentPage = 1; // 默认第一页

function handleSearch(e) {
  keyword = e.target.value;
  const filteredProducts = searchProducts(keyword);
  displayProducts(filteredProducts, currentPage);
}

function handlePagination(page) {
  currentPage = page;
  displayProducts(searchProducts(keyword), currentPage);
}

function displayProducts(products, currentPage) {
  console.log('当前页:', currentPage);
  console.log('搜索结果:', products);
  // 实际应用中，你可以渲染分页后的列表到DOM中
}

在这个例子中，用户输入关键词触发`handleSearch`函数，筛选出包含该关键词的商品。`paginate`函数用于按每页显示的数量分页。`displayProducts`函数负责更新显示的页面内容。