javascript - 使用 keyup 事件将更改动态应用到多个元素

Question

我正在尝试构建基本的 JavaScript 搜索功能。所以我有几个 div 和一个输入搜索字段:

<div class="notes">
  <div class="firstNote">FIRST NOTE</div>
  <div class="secondNote">SECOND NOTE</div>
  <div class="thirdNote">THIRD NOTE</div>
  <div class="fourthNote">THIRDDD NOTE</div>
  <div class="fifthNote">THIRL NOTE</div>
</div>
<div class="search">
  <input type="text" placeholder="Search...">
</div>

这个想法是，当用户在搜索框中键入内容时，它会根据父 notes div 内的 div 的 innerHTML 值检查他们键入的内容。当这些值匹配时，它应该将 searched 类应用于找到匹配值的那些 div。然后通过设置 display:none 来隐藏所有其他 div。一旦停止找到匹配，它应该从所有 div 中删除 searched 类，并通过给它们 display:block 再次显示它们。

问题是这仅适用于它找到的第一个匹配的 div。我创建了其中几个以字母“THIR”开头的用于测试。如果我开始输入“thir”，它只会显示(即应用“searched”类)第一个文本匹配的 div(带有 thirdNote 类的 div)，但不会显示其他两个他们仍然匹配。 JS代码如下:

const notes = document.querySelectorAll(".notes div");
const search = document.querySelector(".search input");
let count = 0; //detecting the number of times the user typed in the input field

search.addEventListener("keyup", function(e){
    let x = 1; //will use this to compare the values of the search box and the divs
    if(e.which === 16) //if the user presses Shift, don't do anything
      return;
    if(e.which !== 8) //if pressed anything but Backspace, increase the count
      count++;
    else if(e.which === 8 && count >= 1) { // otherwise decrease the count
      count--;
  } 
  const textSearched = this.value; //what the user typed in the searchbox
//if there is no text in the search box, remove the 'searched' class from all the divs, show all of them, and reset x back to 1
  if(count === 0 || textSearched === ""){
    notes.forEach(function(el){
      if(el.style.display === "none")
        el.style.display = "block";
      if(el.classList.contains("searched"))
        el.classList.remove("searched");
    });
    x = 1;
  }
  notes.forEach((body) => {
  //while the search box and the div text values match, and x is not greater than the div text length, add the 'searched' class and increment x
     while(textSearched.substring(0, x).toLowerCase() === body.innerHTML.substring(0, x).toLowerCase() && x <= body.innerHTML.length) {
         body.classList.add("searched");
       x++;
//if count is less than x, it means there is a match. So show all the matching divs, and hide all the other ones
       if(count < x) {
         notes.forEach((el) => {
           if(!el.classList.contains("searched"))
             el.style.display = "none";
           else
             el.style.display = "block";
         });
      }
// if count is equal or greater than x, it means no more matching, so show all the divs and remove the 'searched' class
       else {
        notes.forEach(function(el){
            if(el.style.display === "none")
              el.style.display = "block";
            if(el.classList.contains("searched"))
              el.classList.remove("searched");
        });
       }
     } 
  }); 
});

这是一个有效的 JS Fiddle:https://jsfiddle.net/tpxd5cqm/4/

谢谢!

Answer 1

这就是我要做的:当检测到匹配的搜索元素时切换父容器上的类，并在没有匹配项或输入为空时删除该类。当父类处于事件状态时，突出显示所有 .searched 子类，并隐藏所有非 .searched 子类:

const container = document.querySelector('.notes');
const notes = [...container.children];
const input = document.querySelector('input');
input.addEventListener('keydown', () => {
  // Wait for the input field to contain its final value:
  setTimeout(checkInput);
});
const checkInput = () => {
  const value = input.value.toLowerCase();
  const matchingNotes = notes.filter(note => note.textContent.toLowerCase().includes(value));
  if (!value || matchingNotes.length === 0) {
    container.classList.remove('searchActive');
    return;
  }
  container.classList.add('searchActive');
  for (const note of notes) {
    if (matchingNotes.includes(note)) {
      note.classList.add('searched');
    } else {
      note.classList.remove('searched');
    }
  }
}

.searchActive > .searched {
  background-color: yellow;
}
.searchActive > *:not(.searched) {
  display: none;
}

<div class="notes">
  <div>FIRST NOTE</div>
  <div>SECOND NOTE</div>
  <div>THIRD NOTE</div>
  <div>THIRDDD NOTE</div>
  <div>THIRL NOTE</div>
</div>
<div>
  <input type="text" placeholder="Search...">
</div>