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

Question

当搜索字段中有任何输入时，我一直试图隐藏 titleMain div。但由于某种原因，它不起作用。

我一直在尝试在搜索中没有输入时显示 titleMain div，并在有任何搜索输入时隐藏。

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

您需要在事件处理程序中检查您的搜索输入。您也没有检查输入值本身。使用 if ($('input').val().length == 0) {。您可以使用 $("#titleMain").toggle($('input').val().length == 0);:

显示/隐藏单行

例子:

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>