Показать или скрыть div в зависимости от ввода пользователя

Question

Я бы хотел включить функцию поиска на свой веб-сайт, чтобы пользователь мог вводить некоторые ключевые слова в форме поиска, и отображались только некоторые элементы div.Я не уверен, как сравнивать строки.Вот мой код:

<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 class="divCNN">
    <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">
    <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">
    <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">
    <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() {

    }
    document.addEventListener("keyup", Search);
</script>

Как и в случае ввода CNN, функция будет .show () для этого конкретного div, но не для других.

Спасибо за вашу помощь!

Answer 1

Вы можете попробовать сравнить с href каждого a внутри разделов новостей (и дать им контейнер для легкого выбора):

const input = document.querySelector('.search');
const newsDivs = document.querySelectorAll('#news-container > div');
input.addEventListener("keyup", () => {
  const str = input.value.toLowerCase().trim();
  newsDivs.forEach(newsDiv => {
    const href = newsDiv.children[0].href;
    newsDiv.style.display = 
      href.includes(str) ? 'block' : 'none';
  });
});

<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 id="news-container">
  <div class="divCNN">
    <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">
    <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">
    <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">
    <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>
</div>