Почему javascript не хочет читать функции?

Question

[iamvagl]

Пробовал разные функции, search, includes и др. Никакие функции не хочет читать, пишет Uncaught TypeError: is not a function

window.onload = () => {
			let input = document.getElementById('input');
			input.oninput = function () {
				let list = document.querySelectorAll('.ul li');
				//let list = [...list];//
				let value = input.value.trim();
				if (value != '') {
					list.forEach(function () {
						if (list.findIndex(element => list.includes(value))) {

						}
					})
				}
			};
		}

код

<div class="search input-group" >
			<input type="search" name="" class="input__form" id="input" placeholder="Поиск товаров..">
			<ul class="ul list-group">
				<li id="item1" class="item4 list-group-item">TWS Apple Airpods Pro 1</li>
				<li id="item1" class="item4 list-group-item">TWS Apple Airpods Pro 1</li>
				<li id="item1" class="item4 list-group-item">TWS Apple Airpods Pro 1</li>
			</ul>
		</div>

Мне надо чтобы из введенного в поле input человеком, скрипт брал строку, искал эту строку в списке из 3 li, и есть такое значение есть, то все остается как было, а если нету, то добавляется класс .hide

Answer 1

[Ivan Ustûžanin]

потому что querySelectorAll() возвращает не массив, а похожий на него объект (NodeList)
если нужен массив, нужно преобразовать вручную через Array.from()

Comments

[historydev]

Это база)

[iamvagl]

Array.from(list).search(value)? Так сработает?

[Ivan Ustûžanin]

iamvagl, нет, потому что в массиве будут html-элементы

[iamvagl]

IvanU7n, треш, и как лучше написать?
Array.from( list.findIndex(element => list.includes(value)))

[Ivan Ustûžanin]

iamvagl, это вообще что-то странное, нужно как-то так:

const input = document.querySelector('.input-group input');
input.addEventListener('input', event => {
	event.target.closest('.input-group').querySelectorAll('li').forEach(node => {
		node.classList.toggle('hidden', node.textContent.includes(input));
	});
});

[iamvagl]

IvanU7n, Попробовал, при вводе в поле input просто скрывается весь список и все, обратно не возвращается. Причем при вводе любого символа. Хотя должны скрываться те, которые не имеют в себе подстроку из введенного значения input

[iamvagl]

IvanU7n, Я могу вам просто сайт дать, можете посмотреть как это выглядит. https://www.hi-tech-online.ru

[Ivan Ustûžanin]

iamvagl, код-то был примерный и даработан немного не в ту сторону
рабочий пример получается такой:

const input = // ...
input.addEventListener('input', event => {
    const value = event.target.value.trim().toLowerCase();
    event.target.closest('.search').querySelectorAll('li').forEach(node => {
        node.classList.toggle('hide', value !== '' && !node.textContent.toLowerCase().includes(value));
    });
});

[iamvagl]

IvanU7n, Уже работает, правда цифры не считает. Если пишу например 2, то скрывает весь список, хотя должен оставаться элемент TWS Apple Airpods Pro 2.

[iamvagl]

IvanU7n, Все, решил благодаря функции toString(). Спасибо большое за помощь!

Answer 2

[iamvagl]

const input = document.getElementById('input');
			input.addEventListener('input', event => {
			    const value = event.target.value.trim().toLowerCase().toString();
			    document.querySelectorAll('.ul li').forEach(node => {
			        if (value !== '' && !node.textContent.toLowerCase().includes(value)) {
			        	node.classList.add('hide')
			        } else {
			        	node.classList.remove('hide');
			        }
			        if (value == '') {
			        	node.classList.add('hide');
			        }
			    });
			});

Окончательный код, кому нужен

<div class="search input-group" >
			<input type="search" name="" class="input__form" id="input" placeholder="Поиск товаров..">
			<ul class="ul list-group">
				<li id="item1" class="item4 list-group-item hide">TWS Apple Airpods Pro 1</li>
				<li id="item1" class="item4 list-group-item hide">TWS Apple Airpods Pro 2</li>
				<li id="item1" class="item4 list-group-item hide">TWS Apple Airpods Pro 3</li>
			</ul>
		</div>