如何在表格搜索中显示多个单元格答案

【问题标题】：How to display multiple cells in Table Search如何在表格搜索中显示多个单元格
【发布时间】：2018-04-02 18:04:54
【问题描述】：

我想知道这个搜索栏是否有一种方法可以用来显示多个元素。现在，如果我在具有“321”“1234”“123”“12345”的池中搜索“123”，唯一显示的值将是第一个值：“1234”。我希望显示与我的搜索匹配的所有值，因此这将是正确的搜索结果：“1234”“123”“12345”。

感谢任何答案。

这是我拥有的当前代码：

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>

【问题讨论】：

标签： javascript html search html-table

【解决方案1】：

您的 cells 选择器返回一个 nodelist 这是一个数组对象。那没有forEach 功能。

但是我们可以从 Array 对象中借用：

Array.prototype.forEach

我为解决另一个问题所做的就是创建一个indexArray 作为查找数组。跟踪包含搜索字符串的索引。然后，当我们循环所有单元格时，我们可以将那些没有出现在查找数组中的单元格打开

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>

【讨论】：

这很棒并且会使用它，但是否有可能使搜索以某种方式工作，如果我输入“1”，它将只显示以 1 开头的结果，而不是包含 1 的那些？
刚刚把-1改成了0，就可以了！
到目前为止，这对我的项目来说效果很好，但还有最后一件事。如果您搜索“abcde”，结果会显示出来，没问题，但是当您一直退格回到“abc”时，它仍然只显示“abcde”。是否可以使用我拥有的当前代码解决此问题？

【解决方案2】：

如果您想显示哪个单元格包含该搜索，下面的代码就足够了；你也可以在 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"; 
    }
}
});

【讨论】：