0

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

Вот код:

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

2 ответа 2

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

0

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.