如何在搜索前隐藏答案

Question

我已经使用下面的代码过滤 div 个元素，但我希望它只在搜索栏中输入内容后显示结果。当搜索框中没有 searched/typed 时，直到那时什么都不会显示。希望你明白我在说什么。我希望它只在有人输入任何内容时显示结果。

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>

Answer 1

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

首先，您首先需要使用 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.
这行firstElementChild不需要得到const title = book.firstElementChild.textContent;
您需要显示或隐藏整个列表而不是其名称，因此您需要将 book.style.display 更改为 book.closest('.list-single').style.display

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

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>

如果您正在寻找一种更优雅、更高效的方式，您可以在以下相同位置完成所有条件：

const searchBar = document.forms['search-books'].querySelector('input');
const books = document.getElementsByTagName('h5');
searchBar.addEventListener('keyup', function(e) {
  const term = e.target.value.toLocaleLowerCase();
  Array.from(books).forEach(function(book) {
    const title = book.textContent;
    if (term && 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>

Answer 2

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>

如何在搜索前隐藏答案

How to hide answers before searching

html

javascript

css

search-box

ecmascript-6