Как реализовать функцию поискового фильтра JavaScript в таблице

Question

Я пытаюсь собрать функцию поиска / фильтрации в JavaScript для таблицы HTML.Пример, приведенный в W3Schools, позволяет пользователю вводить элемент в первую ячейку данной строки, таким образом раскрывая целевую ячейку и всю строку, связанную с этой ячейкой, в то же время отфильтровывая все остальные строки.В моем примере, приведенном ниже, ввод «Германия» отфильтровывает все, кроме «Германия, Австрия, Беларусь, Венгрия».Тем не менее, я хочу расширить функцию фильтрации для конкретных ячеек.Если я введу ячейку второго столбца, такую ​​как «Австрия», то я бы хотел, чтобы функция отфильтровывала все остальные строки и ячейки, кроме ячейки «Австрия».Как мне настроить таблицу и функцию для этого?

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

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable td {
  text-align: center;
  padding: 12px;
  border: 1px solid black;
}

<h2>Countries</h2>

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

<table id="myTable">
  <tr>
    <td>Germany</td>
    <td>Austria</td>
    <td>Belarus</td>
    <td>Hungary</td>
  </tr>
  <tr>
    <td>France</td>
    <td>Morocco</td>
    <td>Mali</td>
    <td>South Africa</td>
  </tr>
  <tr>
    <td>Russia</td>
    <td>Belgium</td>
    <td>Tanzania</td>
    <td>Brunei</td>
  </tr>
  <tr>
    <td>Argentina</td>
    <td>Ireland</td>
    <td>Ghana</td>
    <td>Indonesia</td>
  </tr>
</table>

Answer 1

Вы можете добавить этот код, чтобы получить значение ввода для каждой записи, и выполнять итерации таблицы, проверяя значение первого столбца каждой строки.Я не знаю, что именно ты пытался сделать за этим.

var element = document.getElementById('myInput');

element.addEventListener("keyup", function (evt){
  var currentInputValue = this.value;
  var table = document.getElementById('myTable');
  var trs = table.getElementsByTagName("tr");

  for(let i = 0; i < trs.length; i++){
    //I just print value but add the wanted test like levenshtein algorithm to match with the closer value or whatever
    alert(trs[i].getElementsByTagName("td")[0].innerText + " " + currentInputValue);
  }
}, false);

Answer 2

Это будет работать, однако вы также должны рассмотреть возможность добавления функции debounce() .

const myInput = document.getElementById('myInput');
const table = document.getElementById('myTable');
const cells = table.getElementsByTagName('td');
const cellArr = [...cells];

myFunction = (val) => {
 cellArr.forEach(c => {
        c.style.display = 'none';

        if (c.innerText.toLowerCase() === val.toLowerCase()) {
            c.style.display = 'table-cell';
        }
    })
};

Вам также необходимо передать значение в html:

<input type="text" 
       id="myInput" 
       onkeyup="myFunction(this.value)" 
       placeholder="Search for countries..">

Answer 3

Вы можете попробовать это:

function myFunction() {
    var input = document.getElementById('myInput').value;
    for(var i = 0; i < tds.length; i++) {
        var that = tds[i];
        if (that.innerText.toUpperCase().indexOf(input.toUpperCase()) > -1) {
            that.style.display = 'table-cell';
        } else {
            that.style.display = 'none';
        }
    }
}

Вы можете перебирать элементы DOM напрямую.Я надеюсь, что это решение понятно.Я старался сделать это как можно проще.