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