Как не скрывать все элементы если нет результатов?

Question

Проблема в том, что когда вообще нет результатов - надо показать и "no-result" и все элементы. Ниже приведен код отсюда - Как добавить «нет результатов» если ничего не найдено? , но немного измененный мною.

let noResult = document.querySelector("#no-result-id");

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

        if (!val) { // Ничего не ввели? Показать всё, и прервать;
            noResult.classList.add("hide");

            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);
            if (!isMatching === true) {
                elem.closest("article").classList.add('hide');
            }
            else {
                elem.closest("article").classList.remove('hide');
            }
            // Добавить `hide` если нет совпадения. Иначе - удалить.
        });

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

.hide {
  display: none;
}

<input id="elastic">

<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">Hellow</h3>
  </article>
  <article class="game-item">
    <h3 class="card-hide-title">World</h3>
  </article>
  <article class="game-item">
    <h3 class="card-hide-title"></h3>
  </article>
</div>

Answer 1

let oNoResult = document.querySelector("#no-result-id");
let aItems = [...document.querySelectorAll('.elastic article h3')];
/* Обработчик ввода */
document.querySelector('#elastic').addEventListener("input", function() {
  // Подрезка пробелов и экранирование спецсимволов regexp
  let sVal = this.value.trim().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  /* Фильтрация блоков для скрытия */
  let aForHide = aItems.filter(function(el) {
    // Показываем КАЖДЫЙ блок
    el.closest("article").classList.remove('hide');
    // Добавляем в массив скрываемый блок
    return !(new RegExp(sVal, "gi").test(el.textContent));
  });
  /* Перебор скрываемых блоков */
  aForHide.forEach(function(el) {
    // Скрываем, если в массиве НЕ ВСЕ блоки
    el.closest("article").classList.toggle('hide', (aForHide.length != aItems.length));
  });
  // Скрываем предупреждение, если в массиве НЕ ВСЕ блоки
  oNoResult.classList.toggle("hide", (aForHide.length != aItems.length));
});

.hide { display: none; }

<input id="elastic">
<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">Hellow</h3>
  </article>
  <article class="game-item">
    <h3 class="card-hide-title">World</h3>
  </article>
  <article class="game-item">
    <h3 class="card-hide-title"></h3>
  </article>
</div>

БЛОГ НА HUSL

Как не скрывать все элементы если нет результатов?

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