如何为HTML div实现搜索筛选功能？项目技术方案咨询

Hey Chris, let's tackle that search filter feature you need for your project site. Your plan to use div IDs as the basis for filtering is totally valid, and we can also expand it to target the actual heading text for more flexibility. Here are two practical, easy-to-implement solutions that work with your existing HTML structure:

First: Add a CSS Class for Hidden Tiles #

Before we get to the JavaScript, let's add a simple class to hide tiles that don't match the search query—this will keep our styling clean:

.hidden {
  display: none;
}

This won't interfere with your existing button styles, so you can drop it right into your CSS.

Option 1: Filter Using Div IDs (Your Original Approach) #

Since your tile IDs (television, movies, music) already match the category titles exactly, this method is fast and straightforward.

Add this JavaScript to your page (you can put it at the bottom of your HTML body, or in a separate JS file):

// Grab the search bar and all discover tiles
const searchBar = document.getElementById('search-bar');
const discoverTiles = document.querySelectorAll('.discover-tile');

// Listen for input changes in the search bar
searchBar.addEventListener('input', function() {
  // Convert the search term to lowercase for case-insensitive matching
  const searchTerm = this.value.trim().toLowerCase();

  // Loop through each tile to check for a match
  discoverTiles.forEach(tile => {
    if (tile.id.toLowerCase().includes(searchTerm)) {
      // Show the tile if its ID matches the search term
      tile.classList.remove('hidden');
    } else {
      // Hide the tile if there's no match
      tile.classList.add('hidden');
    }
  });
});

How this works: #

• We listen for any keystroke or input in the search bar
• Both the search term and tile ID are converted to lowercase so searches like "TELEVISION" or "music" still work
• Tiles are shown/hidden based on whether their ID contains the search term

Option 2: Filter Using Heading Text (More Flexible) #

If you ever update a category title without changing the div ID, or want to search against the visible text users see, this method is more robust. It targets the .discover-title heading inside each tile instead of the ID.

Use the same .hidden CSS class as above, then use this JavaScript instead:

const searchBar = document.getElementById('search-bar');
const discoverTiles = document.querySelectorAll('.discover-tile');

searchBar.addEventListener('input', function() {
  const searchTerm = this.value.trim().toLowerCase();

  discoverTiles.forEach(tile => {
    // Get the text content of the tile's heading
    const tileTitle = tile.querySelector('.discover-title').textContent.toLowerCase();
    
    if (tileTitle.includes(searchTerm)) {
      tile.classList.remove('hidden');
    } else {
      tile.classList.add('hidden');
    }
  });
});

Bonus Tip: #

If you want to make the filter even smoother, you could add a slight delay (using setTimeout) to avoid running the filter on every single keystroke, but for a small number of tiles like yours, the above code will work perfectly without it.

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