Как добавить «нет результатов» если ничего не найдено?

Question

Я нашел код для "живого поиска" по списку элементов. Но когда нет результатов, то список просто становиться пустым. Мне надо что-бы появилась надпись "нет результатов".

Вот код:

<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">Title 1</h3>
  </article>
  <article  class="game-item">
      <h3 class="card-hide-title">Title 2</h3>
  </article>
  <article  class="game-item">
      <h3 class="card-hide-title">Title 3</h3>
  </article>
</div>

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

Answer 1

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);
    // Добавить `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">Aaa</h3>
  </article>
  <article class="game-item">
    <h3 class="card-hide-title">aAb</h3>
  </article>
  <article class="game-item">
    <h3 class="card-hide-title">bbb</h3>
  </article>
</div>

(*) anyMatch = anyMatch || isMatching; — логическое "ИЛИ", работает так:

false || false → false
false || true  → true

true  || true  → true
true  || false → true

Можно было заменить на

if (isMatching) anyMatch = true;

Тогда так же: anyMatch стал бы true, из-за хотя бы одного значения true у isMatching

Answer 2

Делаем скрытый элемент .noResults со словами "нет результатов".

В начале функции: let hasAnyResult = false

После каждого remove('hide'): hasAnyResult = true

В конце функции: находим .noResults и прячем/показываем в зависимости от hasAnyResult

БЛОГ НА HUSL

Как добавить «нет результатов» если ничего не найдено?

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