Фильтр / Таблица поиска для точного соответствия

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

Для точного соответствия используйте оператор ===.Также нет необходимости использовать toUpperCase, поскольку сравниваются только числа.

Кроме того, запрос для tr является избыточным, поскольку было бы более эффективно получить все td s.

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 2

Когда индекс фильтра <-1, вы должны установить отображаемое значение в блок </p>

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

Answer 3

Проверка правильности работы txtValue === filter.Обратите внимание, что, поскольку td s не содержат слов, 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>