基于JSON字段搜索名称：Web应用按选中值筛选显示内容求助

Hey there! Let's tackle this filtering feature you want to add. I'll walk you through a practical approach with example code that aligns with the typical structure of what you've already built.

To add this filtering capability, we'll need 4 core pieces:

1. A selection control (like a dropdown) for users to pick their filter criteria
2. An event listener to detect when the selection changes
3. Logic to filter your JSON data based on the selected value
4. A way to re-render the content with the filtered results

Example Implementation #

Here's a complete, adaptable example based on common patterns for this kind of app:

HTML Section #

<!-- Filter dropdown -->
<select id="filterSelector">
  <option value="all">Show All</option>
  <option value="books">Books</option>
  <option value="movies">Movies</option>
  <option value="music">Music</option>
</select>

<!-- Container to display content -->
<div id="contentDisplay"></div>

JavaScript Section (with embedded JSON data) #

// Your embedded JSON data (adjust this to match your actual structure)
const contentData = [
  { id: 1, title: "The Great Gatsby", type: "books", description: "A classic American novel" },
  { id: 2, title: "Inception", type: "movies", description: "A mind-bending sci-fi film" },
  { id: 3, title: "Dark Side of the Moon", type: "music", description: "Iconic Pink Floyd album" },
  { id: 4, title: "1984", type: "books", description: "George Orwell's dystopian masterpiece" },
  { id: 5, title: "Parasite", type: "movies", description: "Oscar-winning South Korean thriller" }
];

// Initial render of all content
renderContent(contentData);

// Set up filter listener
const filterSelector = document.getElementById('filterSelector');
filterSelector.addEventListener('change', handleFilterChange);

// Handle filter selection changes
function handleFilterChange() {
  const selectedFilter = this.value;
  let filteredResults;

  // Filter data based on selection
  if (selectedFilter === 'all') {
    filteredResults = [...contentData]; // Copy full dataset to avoid mutating original
  } else {
    // Adjust the `type` field here to match your JSON's filterable property
    filteredResults = contentData.filter(item => item.type === selectedFilter);
  }

  // Re-render with filtered data
  renderContent(filteredResults);
}

// Content rendering function (integrate your existing display logic here)
function renderContent(items) {
  const displayContainer = document.getElementById('contentDisplay');
  // Clear existing content first
  displayContainer.innerHTML = '';

  // Generate DOM elements for each item
  items.forEach(item => {
    const itemCard = document.createElement('div');
    itemCard.classList.add('content-card');
    itemCard.innerHTML = `
      <h3>${item.title}</h3>
      <p><strong>Type:</strong> ${item.type}</p>
      <p>${item.description}</p>
    `;
    displayContainer.appendChild(itemCard);
  });
}

Key Details to Adapt to Your Code #

1. Adjust the filter condition: If your JSON uses a different field for filtering (like category, status, or tag), replace item.type === selectedFilter with your target field.
2. Reuse your existing render function: If you already have a function to display content, just pass the filtered data into that function instead of using the example renderContent function.
3. Support other selection types: If you're using radio buttons instead of a dropdown, listen for click events instead of change, and get the selected value by checking which radio button has checked === true.

With these changes, your app will dynamically update the displayed content based on whatever value the user selects!

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