实现搜索输入动态匹配并更新商品列表的技术需求

Got it, let's build that real-time search feature for your product catalog. The core idea is to first store your product data in a structured way (so we can filter it easily) and then add a listener to the search input that triggers filtering and re-rendering of the list. Here's a step-by-step solution:

Step 1: Refactor Product Data & Rendering Logic #

First, let's fix your initial code to store product info in an array instead of rendering directly from thumbFiles and items on the fly. This makes filtering way simpler and more efficient.

Updated JavaScript Code #

// Assume these are your existing variables (from preload.js)
// const products = "Your Catalog Name"; // e.g., "Home Goods"
// const thumbFiles = ["path/to/thumb1.jpg", ...];
// const items = ["path/to/product1.html", ...];

// 1. Create an array to store all product data for easy filtering
const productData = [];
for (let i = 0; i < thumbFiles.length; i++) {
  const pathName = thumbFiles[i];
  const finalName = pathName.split('/').pop();
  const productName = path.parse(finalName).name;
  
  productData.push({
    href: items[i],
    thumbSrc: thumbFiles[i],
    name: productName
  });
}

// 2. Grab DOM elements we'll need
const productList = document.getElementById('product-list');
const title = document.getElementById('guide');
const searchField = document.getElementById('search-field');

// 3. Initial render of all products when the page loads
title.innerHTML = `You are looking at the ${products} catalog.`;
renderProducts(productData);

// 4. Reusable render function: takes filtered products and updates the list
function renderProducts(filteredProducts) {
  // Clear existing items first to avoid duplicates
  productList.innerHTML = '';
  
  // Add each filtered product to the list
  filteredProducts.forEach(product => {
    const listItem = document.createElement('li');
    listItem.className = 'product-container';
    listItem.innerHTML = `
      <div class="new-thumb">
        <a href="${product.href}" target="_blank">
          <img src="${product.thumbSrc}" alt="Product thumbnail" class="thumbnail">
        </a>
        <h4>${product.name}</h4>
      </div>
    `;
    productList.appendChild(listItem);
  });
}

Step 2: Add Real-Time Search Functionality #

Now we'll add an event listener to the search input. Every time the user types, we'll filter the productData array to match their search term, then re-render the list with the results.

Add this snippet to your JavaScript:

// 5. Listen for input changes in the search field
searchField.addEventListener('input', function() {
  const searchTerm = this.value.toLowerCase().trim();
  
  // Filter products: match the search term against product names (case-insensitive)
  const filteredProducts = productData.filter(product => 
    product.name.toLowerCase().includes(searchTerm)
  );
  
  // Update the guide text to reflect search state
  if (searchTerm) {
    title.innerHTML = `Showing results for "${searchTerm}" in the ${products} catalog.`;
  } else {
    title.innerHTML = `You are looking at the ${products} catalog.`;
  }
  
  // Render the filtered product list
  renderProducts(filteredProducts);
});

Step 3: Fix Your HTML Structure #

I noticed a stray closing </div> in your original HTML—here's the cleaned-up version:

<input type="search" id="search-field" placeholder="Search...">
<div class="container">
  <p id="guide">Select a category from the menu</p>
  <ul id="product-list"></ul>
  <script src="./preload.js"></script>
</div>

Key Improvements: #

• Efficient Rendering: Instead of appending to innerHTML repeatedly (which is slow and can cause bugs), we clear the list and build it fresh with filtered items.
• Case-Insensitive Search: Converts both the search term and product names to lowercase so matches work regardless of capitalization.
• Clean Data Management: Storing product info in an array makes it easy to expand the search later (e.g., add descriptions or categories to filter against).

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