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 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;
}

JavaScript

document.querySelector('#elastic').oninput = function () {
        let val = this.value.trim();
        let elasticItems = document.querySelectorAll('.elastic article h3');
        if (val != '') {
            elasticItems.forEach(function (elem) {
                if (elem.innerText.search((RegExp(val,"gi"))) == -1 ) {
                    elem.closest("article").classList.add('hide');
                }
                else {
                    elem.closest('article').classList.remove('hide');
                }
            });
        }
        else {
            elasticItems.forEach(function (elem) {
                elem.closest('article').classList.remove('hide');
            });
        }
    };