Wie mehrere Zellen in der Tabellensuche angezeigt werden

Question

Ich frage mich, ob es eine Möglichkeit für diese Suchleiste gibt, die ich verwende, um mehrere Elemente anzuzeigen. Wie es jetzt ist, wenn ich nach "123" in einem Pool mit "321" "1234" "123" "12345" suche Der einzige angezeigte Wert wäre der erste: "1234". Ich möchte, dass alle Werte angezeigt werden, die meiner Suche entsprechen, daher wäre dies das korrekte Suchergebnis: "1234" "123" "12345".

Jede Antwort wird geschätzt.

Hier ist der aktuelle Code, den ich habe:

var cells = document.querySelectorAll("#myTable td"); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function() { 
 
if (search.value.length > 0 && search.value != '') { 
 
    for (var i = 0; i < cells.length; ++i) { 
 
     if  (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) { 
 
      cells.forEach(function(element) { 
 
       element.style.display = "none"; 
 
      }); 
 
      cells[i].style.display = "table-cell"; 
 
      break; 
 
     } else { 
 
      cells.forEach(function(element) { 
 
       if (cells[i] !== element) { 
 
        element.style.display = "table-cell"; 
 
       } 
 
      }); 
 
     } 
 
    } 
 
} else { 
 
    cells.forEach(function(element) { 
 
     if (cells[i] !== element) { 
 
      element.style.display = "table-cell"; 
 
     } 
 
    }); 
 

 
} 
 
});

<input id="myInput"> 
 
<table id="myTable"> 
 
    <tr> 
 
     <td>321</td> 
 
     <td>123</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1234</td> 
 
     <td>abc</td> 
 
    </tr> 
 
    <tr> 
 
     <td>12345</td> 
 
     <td>abcde</td> 
 
    </tr> 
 
</table>

Answer 1

Ihr cells Selektor gibt einen nodelist dies ist ein arrayish Objekt. Das hat nicht die forEach Funktion.

Allerdings können wir aus dem Array-Objekt ausleihen:

Array.prototype.forEach

Was ich das andere Problem zu lösen tat, ist eine indexArray als Lookup-Array erstellen. Das verfolgt die Indizes, die die Suchzeichenfolge enthalten. Dann, wenn wir Schleife alle Zellen wir diejenigen davon machen kann zeigen nach oben nicht in der Lookup-Array

var cells = document.querySelectorAll("#myTable td"); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function() { 
 
    var indexArray = []; //look up array 
 
    for (var i = 0; i < cells.length; ++i) { 
 
     //restore the cells: 
 
     cells[i].style.display = "table-cell"; 
 
    
 
     //if search value is found the value will be 0 if it starts a the beginning 
 
     if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) { 
 
     indexArray.push(i); //push index into lookup 
 
     } 
 
    } 
 
    //loop over all cells 
 
    Array.prototype.forEach.call(cells, function(element, index) { 
 
     if (indexArray.indexOf(index) === -1) //if index is not present in look up, set display to none 
 
     element.style.display = "none"; 
 
    }); 
 

 
});

<input id="myInput"> 
 
<table id="myTable"> 
 
    <tr> 
 
    <td>321</td> 
 
    <td>123</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1234</td> 
 
    <td>abc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>12345</td> 
 
    <td>abcde</td> 
 
    </tr> 
 
</table>

Answer 2

Code unten ist genug, wenn Sie zeigen wollen, welche Zelle enthalten ist, dass Suche; Auch können Sie jsfiddle https://jsfiddle.net/bzcdomjs/

var cells = document.querySelectorAll("#myTable td"); 
var search = document.getElementById("myInput"); 
search.addEventListener("keyup", function() { 
    for (var i = 0; i < cells.length; ++i) { 
    cells[i].style.display = "table-cell"; 
    if (search.value.length > 0 && search.value != '') { 
      if(cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === -1) { 
     cells[i].style.display = "none"; 
    } 
} 
});