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

Question

[Samalamadoit]

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

Вот код:

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

Comments

[Samalamadoit]

Bavashi, https://jsfiddle.net/Samalamadoit/26wvcadu/
Да, согласен, вот

Answer 1

[Samalamadoit]

Вот если кому надо будет когда-то.
Видео откуда брал код - https://www.youtube.com/watch?v=vV4cUAZvEy4
Вот решение вопроса:

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` если есть хотя бы одно совпадение. Иначе - удалить.
});

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

.hide {
  display: none;
}

Вот можно посмотреть:
https://jsfiddle.net/Samalamadoit/0ugpj21v/

Answer 2

[Alex]

Ну, вот у вас в коде есть фильтр. После фильтра -- проверяете: все заголовки отфильтрованы? Да -- показать текст. Нет -- скрыть текст.

Comments

[Samalamadoit]

Alex , да я понимаю что такая логика, просто не понимаю как написать.
Вот может быть если вам не сложно, то вы поможете?
https://jsfiddle.net/Samalamadoit/26wvcadu/