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

Question

Samalamadoit @Samalamadoit

JavaScript

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

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

Вот код:

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

Вопрос задан более трёх лет назад
178 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

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

Answer 1 · 2020-08-22 14:38:11

Вот если кому надо будет когда-то.
Видео откуда брал код - 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/

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

Войдите на сайт