Question

您好，我正在为澡堂开发一个网站，我需要优化搜索框，但是我有一个小问题。我的订单表的名称和姓氏分为两行，当我搜索某个人时，我只能插入姓名或姓氏而不是两者！

我想过滤整行，例如我有订单号，名称，姓氏..如果我全都输入并加上空格来查找（46 Jace Smith）。

这样的表列：

------------------------------
| # 46 |    Name1 | Surname2 |
------------------------------

现在我的代码只能按单列查找，只能查找名称，姓氏或订单号。

 < input class="form-control" id="SearchBox" onkeyup="myFunction()" type="text" placeholder="Search...">


              <script>

              function myFunction() {
                // SearchBox  -- TabellaPrenotazioni
                // Declare variables 
                var input = document.getElementById("SearchBox");
                var filter = input.value.toUpperCase();
                var table = document.getElementById("TabellaPrenotazioni");
                var trs = table.tBodies[0].getElementsByTagName("tr");

                // Loop through first tbody's rows
                for (var i = 0; i < trs.length; i++) {

                  // define the row's cells
                  var tds = trs[i].getElementsByTagName("td");

                  // hide the row
                  trs[i].style.display = "none";

                  // loop through row cells
                  for (var i2 = 0; i2 < tds.length; i2++) {

                    // if there's a match
                    if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

                      // show the row
                      trs[i].style.display = "";

                      // skip to the next row
                      continue;

                    }
                  }
                }


              }
              </script>

我试图将行连接起来，但是没有用... 例如：

var tds = trs[i].getElementsByTagName("td") +" " +trs[i++].getElementsByTagName("td");

Answer 1

好吧，我想到了什么，也许您可以将行的单元格的innerHTML映射到字符串数组，并在包含查询的字符串中进行搜索。这是修改后的代码：

function myFunction() {
    // SearchBox  -- TabellaPrenotazioni
    // Declare variables 
    var input = document.getElementById("SearchBox");
    var filter = input.value.toUpperCase();
    var table = document.getElementById("TabellaPrenotazioni");
    var trs = table.tBodies[0].getElementsByTagName("tr");

    // Loop through first tbody's rows
    for (var i = 0; i < trs.length; i++) {

        // define the row's cells
        var tds = trs[i].getElementsByTagName("td");

        // get the text from the row columns and put it in an array
        let cellData = tds.map((td, index) => { td.innerHTML })
        // turn it into a long string separated by spaces
        let rowString = cellData.join(" ");

        // hide the row
        trs[i].style.display = "none";

        // loop through row cells
        for (var i2 = 0; i2 < tds.length; i2++) {

            // if there's a match
            if (rowString.includes(filter)) {

                // show the row
                trs[i].style.display = "";

                // skip to the next row
                continue;

            }
        }
    }


}

Answer 2

var timeout;
$("input").keyup(function(){
  if(timeout){
    clearTimeout(timeout);
  }
  
  timeout = setTimeout(function(){
    let vals = $("input").val().split(" ").filter(function(val){
      return val !== "";
    }).map(function(val){
      return new RegExp("^" + val + "$", "i");
    });
    
    $("tbody > tr").each(function(){
      var tds = $(this).find("td");
      
      var match = vals.reduce(function(match, val){
        var submatch = false;
        tds.each(function(){
          if(val.test($(this).text())) submatch = true;
        })

        return match || submatch;
      }, false)
      
      if(match && vals.length > 0){
        $(this).removeClass('hide');
      }else{
        $(this).addClass('hide');
      }
    })
    clearTimeout(timeout);
  }, 240)
})

.hide {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text">

<table>
  <thead><tr><th>Order #</th><th>Name</th><th>Surname</th></tr></thead>
  <tbody>
    <tr><td>100</td><td>James</td><td>Caffrey</td></tr>
    <tr><td>105</td><td>Lucy</td><td>Nobel</td></tr>
    <tr><td>110</td><td>Arthur</td><td>Wiseman</td></tr>
  </tbody>
</table>

我包括了jQuery，以使内容更清晰。您可以在没有jQuery的情况下执行此操作。超时用于消除用户输入的反跳，我还使用Regular Experssions进行字符串匹配。

js用1个输入过滤表的2行

2 个答案: