Question

我建立了一个图书馆存档站点，当用户在搜索栏中按标题搜索书籍时，它将把该值与我的ls中可用的书籍清单进行比较，并在找到匹配项时将其显示为栏下的清单。有两个问题。

每当输入的值匹配时，我显示的列表项就会重复，甚至在退格时也会重复显示
在退格键上，当搜索栏中没有任何内容时，我希望不显示所有项目，您可以通过if语句看到尝试

/////////////////////Search Bar//////////////////////////
const input = document.querySelector("#listSearch").addEventListener("keyup",function(e){

  let value = e.target.value.toLowerCase();
 console.log(value.length)

 if (localStorage.getItem('books') === null) {
  books = [];
} else {
  books = JSON.parse(localStorage.getItem('books'));
}

  document.querySelectorAll("#myList li").forEach(function(li){
    for(i=0;i<books.length;i++){
      console.log(books[i])

      li = document.createElement('li');
      li.className = "list-group-item"
      li.textContent = `${books[i].title}`
      document.querySelector('#myList').appendChild(li);
      console.log(li)
    
       
       if(value.length === 0){
         li.style.display = 'none'
          console.log(value);
       }
      else if(li.textContent.toLowerCase().indexOf(value) != -1){
               li.style.display = 'block'
               console.log(li)
     }

    }

})

})

HTML

  <div class="search-bar">
              <input class="form-control" id="listSearch" type="text" placeholder="Search Archives">
              <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
            
            <ul class="list-group" id="myList">
              <li class="list-group-item">item</li>
             
            </ul>
          </div>

Answer 1

document.querySelector('#listSearch').addEventListener('keyup', (e) => {
  const regex = new RegExp(e.target.value, 'i');

  let [books, booksString] = [[], ''];
  if ((booksString = localStorage.getItem('books')) !== null) {
    books = JSON.parse(booksString);
  }

  const myList = document.getElementById('myList');
  myList.innerHTML = '';

  books
    .filter((book) => regex.test(book.title))
    .forEach((book) => {
      const li = document.createElement('li');
      [li.className, li.textContent] = ['list-group-item', book.title];
      myList.appendChild(li);
    });
});

我强烈建议您添加一个去抖动器。您不想在每个键盘上都这样做。输入更改后，可能要等待600毫秒。

搜索栏过滤

1 个答案: