如何在JavaScript中应用来自多个div元素的过滤

Question

I'm trying to learn javascript filtering. But there are some good examples for filtering from the list elements of the page, but how can I filter an entire div based on the search input?

This is so far I have done, but I'm stuck and not sure how to proceed further, I hope you'll be kind enough to help me learn the process, thanks in advance.

This is the fiddle and the snippet is given below:

 const searchBar = document.forms['search-books'].querySelector('input'); searchBar.addEventListener('keyup', function(e) { const term = e.target.value.toLocaleLowerCase(); const books = list.getElementsByTagName('h5'); Array.from(books).forEach(function(books) { const title = book.firstElementChild.textContent; if (title.toLowerCase().indexOf(term) != -1) { book.style.display = 'block'; } else { book.style.display = 'none'; } }) }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <form id="search-books"> <input type="text" placeholder="Search a book ... "> </form> <div class="container"> <div class="row list-single"> <div class="col-2"><img src="https://images.gr-assets.com/books/1447303603s/2767052.jpg"/></div> <div class="col-10"> <h5> The Hunger Games</h5> <a href="The-Hunger-Games.html">Learn</a> </div> </div> <br> <div class="row list-single"> <div class="col-2"><img src="https://images.gr-assets.com/books/1507396732s/2.jpg"/></div> <div class="col-10"> <h5>Harry Potter</h5> <a href="Harry-Potter.html">Learn</a> </div> </div> </div> 

Answer 1

You need to either declare the list element or get all the elements with Tag h5 .

Since you want to hide or display the element, you should target the parent of the parent of the div with the given text.

 const searchBar = document.forms['search-books'].querySelector('input'); searchBar.addEventListener('keyup', function(e) { const term = e.target.value.toLocaleLowerCase(); const books = document.getElementsByTagName('h5'); Array.from(books).forEach(function(book) { const title = book.textContent; if (title.toLowerCase().indexOf(term) != -1) { book.parentElement.parentElement.style.display = 'flex'; } else { book.parentElement.parentElement.style.display = 'none'; } }) }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <form id="search-books"> <input type="text" placeholder="Search a book ... "> </form> <div class="container"> <div class="row list-single"> <div class="col-2"><img src="https://images.gr-assets.com/books/1447303603s/2767052.jpg"/></div> <div class="col-10"> <h5> The Hunger Games</h5> <a href="The-Hunger-Games.html">Learn</a> </div> </div> <br> <div class="row list-single"> <div class="col-2"><img src="https://images.gr-assets.com/books/1507396732s/2.jpg"/></div> <div class="col-10"> <h5>Harry Potter</h5> <a href="Harry-Potter.html">Learn</a> </div> </div> </div> 

Answer 2

You can use document.querySelectorAll('.container h5') it will return array all h5 tag inside of container .

DEMO

 const searchBar = document.forms['search-books'].querySelector('input'), books = document.querySelectorAll('.container h5'); searchBar.addEventListener('keyup', function(e) { let term = e.target.value.toLocaleLowerCase(); books.forEach(el => { let title = el.innerText; if (title.toLowerCase().indexOf(term) != -1) { el.parentElement.parentElement.style.display = 'block'; } else { el.parentElement.parentElement.style.display = 'none'; } }) }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <form id="search-books"> <input type="text" placeholder="Search a book ... "> </form> <div class="container"> <div class="row list-single"> <div class="col-2"><img src="https://images.gr-assets.com/books/1447303603s/2767052.jpg" /></div> <div class="col-10"> <h5> The Hunger Games</h5> <a href="The-Hunger-Games.html">Learn</a> </div> </div> <br> <div class="row list-single"> <div class="col-2"><img src="https://images.gr-assets.com/books/1507396732s/2.jpg" /></div> <div class="col-10"> <h5>Harry Potter</h5> <a href="Harry-Potter.html">Learn</a> </div> </div> </div>