Question

我想知道我用这个搜索栏是否有办法显示多个元素。因为现在如果我在“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>

Answer 1

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

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

Array.prototype.forEach

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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"; 
    }
}
});

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

2 个答案: