如何通过名称过滤电影元素？JavaScript搜索过滤实现求助

嘿，我来帮你搞定这个电影搜索过滤功能！其实逻辑很简单，我一步步给你讲，保证你能看懂~

1. 先补全你的HTML结构 #

你提供的页面代码片段可以补充成完整的结构，我帮你加上搜索输入框和电影卡片容器（卡片里用data-title属性存电影标题，方便后续JS快速获取）：

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <!-- 新增搜索输入框 -->
        <li><input type="text" id="searchInput" placeholder="搜索电影..."></li>
      </ul>
    </nav>
  </div>
</header>

<!-- 电影卡片容器 -->
<div class="movie-container">
  <div class="movie-card" data-title="Annihilation">
    <h3>Annihilation</h3>
    <!-- 这里可以加海报、简介等自定义内容 -->
  </div>
  <div class="movie-card" data-title="Bomb x City">
    <h3>Bomb x City</h3>
  </div>
  <div class="movie-card" data-title="The Commuter">
    <h3>The Commuter</h3>
  </div>
</div>

2. 加一点基础样式（可选） #

为了让页面布局更舒服，我写了点简单的CSS，你可以直接用：

.movie-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
}

.movie-card {
  border: 1px solid #ddd;
  padding: 15px;
  width: 200px;
  border-radius: 8px;
}

#searchInput {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-left: 10px;
}

3. 核心JavaScript逻辑（重点） #

这部分是实现搜索过滤的关键，每一行都加了注释，你能轻松看懂：

// 获取页面上的搜索输入框和所有电影卡片
const searchInput = document.getElementById('searchInput');
const movieCards = document.querySelectorAll('.movie-card');

// 监听输入框的输入事件（用户每输入/删除一个字符就触发）
searchInput.addEventListener('input', function() {
  // 获取输入的关键词，转成小写——这样搜索"ann"和"ANN"都能匹配到目标电影
  const keyword = this.value.toLowerCase();
  
  // 遍历每一张电影卡片，逐个检查是否匹配
  movieCards.forEach(card => {
    // 获取卡片对应的电影标题，同样转成小写
    const title = card.dataset.title.toLowerCase();
    
    // 检查标题是否包含关键词：匹配就显示卡片，不匹配就隐藏
    if (title.includes(keyword)) {
      card.style.display = 'block';
    } else {
      card.style.display = 'none';
    }
  });
});

小补充：如果你的电影标题是在<h3>里怎么办？ #

如果不想用data-title属性，也可以直接从卡片里的<h3>标签读取标题，把上面的const title = ...改成：

const title = card.querySelector('h3').textContent.toLowerCase();

4. 进阶优化：防抖（可选） #

如果用户快速输入关键词，上面的代码会频繁执行DOM操作，有点浪费性能。可以加个防抖函数，让搜索逻辑在用户停止输入300毫秒后再执行，提升体验：

// 防抖函数：延迟执行传入的函数，避免频繁触发
function debounce(func, delay = 300) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 把监听事件换成防抖后的函数
searchInput.addEventListener('input', debounce(function() {
  const keyword = this.value.toLowerCase();
  
  movieCards.forEach(card => {
    const title = card.dataset.title.toLowerCase();
    // 用三元运算符简化显示/隐藏的判断代码
    card.style.display = title.includes(keyword) ? 'block' : 'none';
  });
}));

这样就完成啦！你可以把这些代码放到你的页面里测试，输入"ann"就只会显示《Annihilation》的卡片了~

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