有多种方法可以做到这一点。 我将赞同其中一种可能的方法。

首先，您需要在第一时间用CSS选择器隐藏所有列表元素，如下所示:

.row.list-single {
   display: none;
}

然后您需要检查您的搜索输入是否填充了单词，如果没有，您需要隐藏所有的元素。 所以你可以简单地这样做:

if (!term) {
  const bookList = document.querySelectorAll('.list-single')
  Array.from(bookList).forEach(function(list) {
    list.style.display = 'none';
  })
}

这就是你需要做的全部。 但你在代码中犯了一些错误，我马上就把它们修好了。

• list变量未定义，您只需使用document更改它。
• 不需要在此行中获取FirstElementChildconst title=Book.FirstElementChild.TextContent；
• 您需要显示或隐藏整个列表而不是其名称，因此需要使用book.closest('.list-single').style.display
更改book.style.display

所以您的最终代码应该是这样的（当某人搜索现有项时，item将显示，例如h将显示两个结果）:

null

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

.row.list-single {
  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>

您可以使用oninput html事件（请参阅:https://www.w3schools.com/jsref/event_OnInput.asp

null

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

 <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>