FilterJS

Quick search (filter) on vanilla JS

by Vallek

HTML

<form class="search-form" action="" method="GET">
    <label hidden for="site-search">Фильтр</label>
    <input placeholder="Начните набирать название..." type="search" name="site-search" id="site-search" class="site-search">
</form>

<section class="item">
    <h3>Стол</h3>
</section>
<section class="item">
    <h3>Стул</h3>
</section>
<section class="item">
    <h3>Шкаф</h3>
</section>
<section class="item">
    <h3>Кровать</h3>
</section>
<section class="item">
    <h3>Два стула</h3>
</section>
<section class="item">
    <h3>Горшок</h3>
</section>

CSS

.site-search {
  width: 100%;
}

.hide {
	visibility: hidden;
	position: absolute;
}

.show {
	visibility: visible;
}

JavaScript

function submit(evt) {
	evt.preventDefault();
}

function filter(evt) {
	evt.preventDefault();
	let input = document.querySelector('#site-search');
	let inputValue = input.value.toUpperCase();	
	let cards = document.querySelectorAll('.item');

	cards.forEach(
		function getMatch(info) {
			let heading = info.querySelector('h3');
			let headingContent = heading.innerHTML.toUpperCase();
			
			if (headingContent.includes(inputValue)) {
				info.classList.add('show');
				info.classList.remove('hide');	
			}
			else {
				info.classList.add('hide');
				info.classList.remove('show');
			}
		}
	)
}

function autoReset() {
	let input = document.querySelector('#site-search');
	let cards = document.querySelectorAll('.item');

	cards.forEach(
		function getMatch(info) {
			if (input.value == null, input.value == "") {
				info.classList.remove('show');
				info.classList.remove('show');
			}
			else {
				return;
			}			
		}
	)
}

let form = document.querySelector('.search-form');

form.addEventListener('keyup', filter);

form.addEventListener('submit', submit);