Результат живого поиска выводить только после ввода трёх символов

Question

Ответ Visman на этот вопрос отлично подходит для решения моей задачи, однако таблица с данными для фильтрации состоит из нескольких сотен строк и сильно загромождает страницу. Возможно ли изменить код так, чтобы при пустых полях ввода таблица всегда была скрыта, а вывод отфильтрованных данных начинался не ранее ввода трёх символов в строку поиска?

$("#rez_tablh input").on("keyup", function(){
    var filterN = $("#thnaim input").val(),
        filterI = $("#thinv input").val();

    $("#rez_tab tr").each(function () {
        var n = $(this).find('#naim').text(),
            i = $(this).find('#inv').text();
        if (n.search(new RegExp(filterN,"i")) < 0 ||
            i.search(new RegExp(filterI,"i")) < 0) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

Answer 1

Объяснение в комментариях к коду.

$("#rez_tablh input").on("keyup", function() {
  var filterN = $("#thnaim input").val(),
      filterI = $("#thinv input").val();
  
  if(filterN.length >= 3  || filterI.length > 0) { // Если длина значения инпут #thnaim больше или равна 3, то выполняем функцию ниже
  // Если требуется аналогичное поведение у второго поля, то замените сравнение `filterI.length > 0` на `filterI.length >= 3`
    $("#rez_tab tr").each(function() {
      var n = $(this).find('#naim').text(),
          i = $(this).find('#inv').text();
      if(n.search(new RegExp(filterN, "i")) < 0 ||
        i.search(new RegExp(filterI, "i")) < 0) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  } else $("#rez_tab tr").show(); // Иначе показываем все варианты.
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="rez_tablh">
  <tr>
    <th id="thnaim"><input type="text" placeholder="Наименование..."></th>
    <th id="thinv"><input type="text" placeholder="Номер № ..."></th>
  </tr>
</table>
<table id="rez_tab">
  <tr>
    <td id="naim">Апельсин</td>
    <td id="inv">10</td>
  </tr>
  <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">12</td>
  </tr>
  <tr>
    <td id="naim">Апельсин</td>
    <td id="inv">42</td>
  </tr>
  <tr>
    <td id="naim">Груша</td>
    <td id="inv">312</td>
  </tr>
  <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">23</td>
  </tr>
</table>

Вариант с изначально скрытыми ячейками
"Грубый" вариант

$("#rez_tablh input").on("keyup", function() {
  var filterN = $("#thnaim input").val(),
      filterI = $("#thinv input").val();
  
  if(filterN.length >= 3 || filterI.length > 0) {
    $("#rez_tab").show(); // Показываем таблицу #rez_tab, когда начинаем "поиск"
    $("#rez_tab tr").each(function() {
      var n = $(this).find('#naim').text(),
          i = $(this).find('#inv').text();
      if(n.search(new RegExp(filterN, "i")) < 0 ||
        i.search(new RegExp(filterI, "i")) < 0) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  } else {
    $("#rez_tab").hide(); // прячем таблицу
    $("#rez_tab tr").show();
  }
});

#rez_tab {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="rez_tablh">
  <tr>
    <th id="thnaim"><input type="text" placeholder="Наименование..."></th>
    <th id="thinv"><input type="text" placeholder="Номер № ..."></th>
  </tr>
</table>
<table id="rez_tab">
  <tr>
    <td id="naim">Апельсин</td>
    <td id="inv">10</td>
  </tr>
  <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">12</td>
  </tr>
  <tr>
    <td id="naim">Апельсин</td>
    <td id="inv">42</td>
  </tr>
  <tr>
    <td id="naim">Груша</td>
    <td id="inv">312</td>
  </tr>
  <tr>
    <td id="naim">Яблоко</td>
    <td id="inv">23</td>
  </tr>
</table>

БЛОГ НА HUSL

Результат живого поиска выводить только после ввода трёх символов

Ответы (1 шт):