preloader для живого поиска

Question

Имею живой поиск

$("#rez_tablh input").on("keyup", function() {
  var filterN = $("#thnaim input").val(),
      filterI = $("#thinv input").val();
  
  if(filterN.length > 0 || filterI.length > 0) {
    $("#rez_tab").show();
    $("#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;
}
.preloader {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
color: #fff;
z-index: 9999999;
}

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

<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>
<script>
$(document).ready(function() {
$('.preloader').fadeOut();
});
</script>

Сразу после открытия страницы таблица с данными скрыта, отфильтрованные значения появляются только после начала ввода. Данных в таблице с данными довольно много. Пытаюсь добавить preloader вывода результатов живого поиска.

Preloader работает исправно, но только не для вывода результатов живого поиска, а на первоначальную загрузку всей страницы. Когда выводится много результатов, то страница как бы подвисает и через 3-5 секунд выдаёт результат. Можно ли как то применить preloader именно для живого поиска? Предполагаю, что скрипт preloader'а надо разместить где-то перед $("#rez_tab").show();

Answer 1

Вам нужно запускать показывать прелоадер в начале поиска $('.preloader').fadeIn() и прятать в конце $('.preloader').fadeOut(), но с таким количеством item-ов он только замедляет процесс а не помогает, нужно дорабатывать его или по другому выводить как то

$("#rez_tablh input").on("keyup", function() {
  $('.preloader').fadeIn();
  var filterN = $("#thnaim input").val(),
      filterI = $("#thinv input").val();
  
  if(filterN.length > 0 || filterI.length > 0) {
    $("#rez_tab").show();
    $("#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();
  }
  $('.preloader').fadeOut();
});

#rez_tab {
  display: none;
}
.preloader {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
color: #fff;
z-index: 9999999;
}

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

<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>
<script>
$('.preloader').fadeOut();
</script>

БЛОГ НА HUSL

preloader для живого поиска

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