live search

by Samalamadoit

HTML

<input id="elastic" class="search-bar" type="text" placeholder="Поиск...">
<div class="game-carts elastic">
<span id="no-result-id" class="no-result hide">no result</span>
  <article  class="game-item">
      <h3 class="card-hide-title">Стол</h3>
  </article>
  <article  class="game-item">
      <h3 class="card-hide-title">Стул</h3>
  </article>
  <article  class="game-item">
      <h3 class="card-hide-title">Полка</h3>
  </article>
</div>

CSS

.elastic article.hide {
  display: none;
}
.hide {
  display: none;
}

JavaScript

document.querySelector('#elastic').addEventListener("input", function() {
  let val = this.value.trim();
  let items = document.querySelectorAll('.elastic article h3');

  if (!val) { // Ничего не ввели? Показать всё, и прервать;
    return items.forEach(function _show_all(elem) {
      elem.closest('article').classList.remove('hide');
    });
  }

  /***/

  let anyMatch = false;

  items.forEach(function(elem) {
    let isMatching = new RegExp(val, "gi").test(elem.textContent); // true или false

    anyMatch = anyMatch || isMatching; // (*)
    // isMatching хотя бы один раз окажется true → anyMatch до конца останется true;

    elem.closest("article").classList.toggle('hide', !isMatching);
    // Добавить `hide` если нет совпадения. Иначе - удалить.
  });

  document.querySelector("#no-result-id").classList.toggle("hide", anyMatch);
  // Добавить `hide` если есть хотя бы одно совпадение. Иначе - удалить.
});