根据搜索输入隐藏和显示 div

Question

I have been trying to hide the titleMain div when there is any input in the search field. But for some reason, it isn't working.

I have been trying to show the titleMain div when there is no input in the search and hidden when there is any search input.

 const searchBar = document.forms['search-books'].querySelector('input'); searchBar.addEventListener('keyup', function(e) { const term = e.target.value.toLocaleLowerCase(); const books = document.getElementsByTagName('h5'); var notAvailable = document.getElementById('notAvailable'); var hasResults = false; Array.from(books).forEach(function(book) { const title = book.textContent; if (title.toLowerCase().indexOf(term) != -1) { book.parentElement.parentElement.style.display = 'flex'; hasResults = true; } else { book.parentElement.parentElement.style.display = 'none'; } }); notAvailable.style.display = hasResults ? 'none' : 'block'; }); if ($('#search').val.length == 0) { $("#titleMain").show(); } else { $("#titleMain").hide(); }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container" id="titleMain" style="background-color: red;">Book List</div> <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 class="row list-single" id="notAvailable" style="display: none;"> <div class="col-12"> <h5>Sorry, the book has not been added yet</h5> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

You need to put the check for your search input in the event handler. You're also not checking the input's value itself. Use if ($('input').val().length == 0) { . You can make the show/hide a one liner with $("#titleMain").toggle($('input').val().length == 0); :

Example:

 const searchBar = document.forms['search-books'].querySelector('input'); searchBar.addEventListener('keyup', function(e) { const term = e.target.value.toLocaleLowerCase(); const books = document.getElementsByTagName('h5'); var notAvailable = document.getElementById('notAvailable'); $("#titleMain").toggle($('input').val().length == 0); var hasResults = false; Array.from(books).forEach(function(book) { const title = book.textContent; if (title.toLowerCase().indexOf(term) != -1) { book.parentElement.parentElement.style.display = 'flex'; hasResults = true; } else { book.parentElement.parentElement.style.display = 'none'; } }); notAvailable.style.display = hasResults ? 'none' : 'block'; });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container" id="titleMain" style="background-color: red;">Book List</div> <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 class="row list-single" id="notAvailable" style="display: none;"> <div class="col-12"> <h5>Sorry, the book has not been added yet</h5> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

You just need to move your showing and hiding code into the event listener, so that it runs every time the input changes. Looks correct apart from that. val is a method which you need to call - $('#search').val().length . $('#search').val.length will give you the number of arguments expected by val - Function.length .