javascript - 从多个 div 元素过滤时显示自定义消息在 JavaScript 中没有返回结果

Question

通过 javascript 过滤，我从可用的 div 元素中过滤书名。但我还有另一个 div，其中包含针对不可用输入的自定义消息。

它适用于某些关键字，但如果输入为 har，则无法按预期方式工作。然后它显示图书结果和未找到自定义消息。

你能解释一下我做错了什么吗？预先感谢您的建议。

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) {
        var notAvailable = document.getElementById('notAvailable');
        const title = book.textContent;
        if (title.toLowerCase().indexOf(term) != -1) {
            book.parentElement.parentElement.style.display = 'flex';
            notAvailable.style.display = 'none';
        } else {
            book.parentElement.parentElement.style.display = 'none';
            notAvailable.style.display = 'block';
        }
    })
})

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

Answer 1

您在数组的每次迭代中切换 #notAvailable 的样式。这意味着它的最终显示值将仅取决于数组的最后一个元素。

这是一个工作版本:

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'; 
})

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

干杯。 :)