Question

我正在使用有效的JavaScript表格搜索过滤器，但是在添加数字时，我只希望完全匹配。如何仅对完全搜索进行过滤？

基本表格示例：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for counts">

<table id="myTable">
  <tr class="header">
    <th style="width:50%;">Counts</th>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>19</td>
  </tr>
  <tr>
    <td>111</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>11</td>
  </tr>
  <tr>
    <td>100</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
  <tr>
    <td>20</td>
  </tr>
</table>

我的实际Javascript：

function myFunction() {       var input, filter, table, tr, td, i, txtValue;    
input = document.getElementById("myInput");    
filter = input.value.toUpperCase();    
table =document.getElementById("myTable");    
tr =table.getElementsByTagName("tr");

    query   for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }    } }

我如何才能在搜索中仅返回完全匹配项？

Answer 1

检查txtValue === filter是否正常。请注意，由于td不包含单词，因此不需要toUpperCase()：

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value;
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent;
      if (txtValue.toUpperCase() === filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for counts">

<table id="myTable">
  <tr class="header">
    <th style="width:50%;">Counts</th>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>19</td>
  </tr>
  <tr>
    <td>111</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>11</td>
  </tr>
  <tr>
    <td>100</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
  <tr>
    <td>20</td>
  </tr>
</table>

如果要在输入为空时显示所有结果：

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value;
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent;
      if (!filter || txtValue === filter) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for counts">

<table id="myTable">
  <tr class="header">
    <th style="width:50%;">Counts</th>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>19</td>
  </tr>
  <tr>
    <td>111</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>11</td>
  </tr>
  <tr>
    <td>100</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
  <tr>
    <td>20</td>
  </tr>
</table>

或者，更优雅一些：

function myFunction() {
  const { value } = document.querySelector('#myInput');
  document.querySelectorAll('#myTable td').forEach((td) => {
    td.parentElement.style.display =
    (!value || td.textContent === value)
    ? ''
    : 'none';
  });
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for counts">

<table id="myTable">
  <tr class="header">
    <th style="width:50%;">Counts</th>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>19</td>
  </tr>
  <tr>
    <td>111</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>11</td>
  </tr>
  <tr>
    <td>100</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
  <tr>
    <td>20</td>
  </tr>
</table>

Answer 2

要完全匹配，请使用===运算符。另外，由于只比较数字，因此无需使用toUpperCase。

此外，查询tr是多余的，因为检索所有td会更有效。

const table = document.getElementById("myTable");
const input = document.getElementById("myInput");
input.addEventListener("keyup", myFunction);

function myFunction(){
  const searchWord = this.value;
  table
    .querySelectorAll("td")
    .forEach(td=>{
      if(searchWord.length === 0){
         td.style.display = "block";
      }
      else if(td.textContent.trim() !== searchWord){
        td.style.display = "none";
      } else td.style.display = "block";
    });
    
  
}

<input type="text" id="myInput"  placeholder="Search for counts">

<table id="myTable">
  <tr class="header">
    <th style="width:50%;">Counts</th>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>19</td>
  </tr>
  <tr>
    <td>111</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>11</td>
  </tr>
  <tr>
    <td>100</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
  <tr>
    <td>20</td>
  </tr>
</table>

Answer 3

当过滤器的索引<-1时，您必须将显示值设置为阻止

 if (txtValue.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "block";
  }

筛选/搜索表以进行完全匹配

3 个答案: