@olyaromanckenko

Как сделать фильтрацию?

нужно чтобы было гибко( есть просто еще подобный блок )
по вводу в инпут название категории, если нет совпадений - удаляются из dom
https://jsfiddle.net/qogLywxb/1/
  • Вопрос задан
  • 151 просмотр
Решения вопроса 1
hzzzzl
@hzzzzl
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
like-a-boss
@like-a-boss
признайся, тебя тянет на код мужика
Фильтрация по мере ввода, фильтруется на частичное вхождение. "Все категории" исключены из фильтра. Должно работать для нескольких блоков на странице.

https://jsfiddle.net/like_a_boss/9eg4umv0/29/

<div class="catalog__item--filter">
  <form action="">
    <input type="text" placeholder="Поиск категории" class="category-search">
  </form>
    <div class="catalog__submenu">
      <div class="catalog__item">
        <input type="checkbox"  id="all" class="category-all">
        <label for="all">Все категории</label>
      </div>
      <div class="catalog__item">
        <input id="history" type="checkbox">
        <label for="history">Исторические</label>
      </div>
      <div class="catalog__item">
        <input id="gortenzy" type="checkbox">
        <label for="gortenzy">Романы</label>
      </div>
      <div class="catalog__item">
        <input id="technically" type="checkbox">
        <label for="technically">Технически исторический роман</label>
      </div>
    </div>

    <div>


var container = document.querySelectorAll('.catalog__item--filter');

for (var i = 0; i < container.length; i++) {
	var checks = container[i].querySelectorAll('[type="checkbox"]'),
		search = container[i].querySelector('.category-search'),
		allCat = container[i].querySelector('.category-all');

	allCat.onchange = function () {
		for (var j = 1; j < checks.length; j++) {
			checks[j].checked = !checks[j].checked;
		}
	}

	search.oninput = function () {
		for (var j = 1; j < checks.length; j++) {
			if (this.value === '') {
				checks[j].style.display = 'block';
				checks[j].nextElementSibling.style.display = 'block';
			} else if (checks[j].nextElementSibling.textContent.toLowerCase().indexOf(this.value.toLowerCase()) === -1) {
				checks[j].style.display = 'none';
				checks[j].nextElementSibling.style.display = 'none';
			}
		}
	}
}


Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
NetLab Москва
от 35 000 до 50 000 руб.
Римэкс Екатеринбург
от 70 000 руб.
от 140 000 до 150 000 руб.
12 дек. 2019, в 03:07
4000 руб./за проект
12 дек. 2019, в 01:49
10000 руб./за проект
11 дек. 2019, в 21:40
50000 руб./за проект