如何实现基于用户输入的div显示/隐藏搜索功能

没问题，我来帮你搞定这个搜索功能！我们只需要完善Search函数，并给新闻div加个统一标识，就能实现输入关键词后只显示对应内容的效果。

首先先给所有新闻div添加一个统一的类名（比如news-item），这样能更方便地批量选中这些元素，然后修改JavaScript逻辑：

<h1 class="title">News Journal</h1>
<input type="text" class="search" placeholder="Search for a subject...">
<p class="mostViewed">Most visited news websites...</p>
<!-- 给每个新闻div添加统一的news-item类 -->
<div class="divCNN news-item">
  <a target="_blank" href="https://www.cnn.com/"><img src="https://pmcdeadline2.files.wordpress.com/2016/11/cnn-logo-2.jpg?w=892&h=598&crop=1" class="CNN"></a>
  <p class="description">CNN was founded in 1980 by American media proprietor Ted Turner as a 24-hour cable news channel. It was the first all-news television channel in the United States and CNN website has an average of 112 millions unique monthly visitors.<a target="_blank" href="https://www.cnn.com/"> Visit !</a></p>
</div>
<div class="divNYT news-item">
  <a target="_blank" href="https://www.nytimes.com/"><img src="https://pmcvariety.files.wordpress.com/2013/08/t_logo_2048_black.png?w=1000&h=563&crop=1" class="NYT"></a>
  <p class="description">The New York Times is an American newspaper based in New York City with worldwide influence and readership. Founded in 1851, the paper has won 125 Pulitzer Prizes, and its website has 95 millions unique monthly visitors.<a target="_blank" href="https://www.nytimes.com/"> Visit !</a></p>
</div>
<div class="divYNews news-item">
  <a target="_blank" href="https://www.yahoo.com/news/"><img src="https://pmcdeadline2.files.wordpress.com/2017/05/yahoo-news-logo.jpg?w=446&h=299&crop=1" class="YNews"></a>
  <p class="description">Yahoo! News is a news website that originated as an internet-based news aggregator by Yahoo!. Articles originally came from news services such as Reuters, Fox News, Al Jazeera, USA Today, CNN, BBC News, etc. 93 millions unique monthly visitors.<a target="_blank" href="https://www.yahoo.com/news/"> Visit !</a></p>
</div>
<div class="divWPost news-item">
  <a target="_blank" href="https://www.washingtonpost.com/"><img src="http://neatoday.org/wp-content/uploads/2018/02/washington-post-logo.jpg" class="WPost"></a>
  <p class="description">The Washington Post is a major American daily newspaper founded on December 6, 1877. It has a particular emphasis on national politics and its website has 92 millions unique monthly visitors.<a target="_blank" href="https://www.washingtonpost.com/"> Visit !</a></p>
</div>
<script type="text/javascript">
function Search() {
  // 获取搜索框输入内容，转小写实现不区分大小写匹配
  const searchTerm = document.querySelector('.search').value.toLowerCase();
  // 获取所有新闻div
  const newsItems = document.querySelectorAll('.news-item');

  // 搜索框为空时显示所有内容
  if (!searchTerm) {
    newsItems.forEach(item => item.style.display = 'block');
    return;
  }

  // 遍历每个新闻div进行匹配
  newsItems.forEach(item => {
    // 获取当前div的所有文本内容，转小写
    const itemContent = item.textContent.toLowerCase();
    // 判断文本是否包含搜索关键词
    if (itemContent.includes(searchTerm)) {
      item.style.display = 'block'; // 匹配到则显示
    } else {
      item.style.display = 'none'; // 未匹配则隐藏
    }
  });
}
document.addEventListener("keyup", Search);
</script>

关键逻辑说明： #

• 统一类名：给所有新闻div加news-item类，能一次性选中所有需要筛选的元素，比单独选择每个类名高效得多。
• 不区分大小写匹配：用toLowerCase()把搜索词和文本都转成小写，用户输入cnn或CNN都能匹配到内容，体验更好。
• 字符串比较：用includes()方法判断文本是否包含关键词，简单直接，完全满足你的需求。
• 空值处理：搜索框为空时自动显示所有内容，避免出现页面空白的情况。

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