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

Пробовал разные функции, 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

Дополнительно:

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

• Это база)
• Array.from(list).search(value)? Так сработает?
• iamvagl, нет, потому что в массиве будут html-элементы
• IvanU7n, треш, и как лучше написать?
  Array.from( list.findIndex(element => list.includes(value)))
• 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)); }); });

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

• IvanU7n, Попробовал, при вводе в поле input просто скрывается весь список и все, обратно не возвращается. Причем при вводе любого символа. Хотя должны скрываться те, которые не имеют в себе подстроку из введенного значения input
• IvanU7n, Я могу вам просто сайт дать, можете посмотреть как это выглядит. https://www.hi-tech-online.ru
• 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)); }); });

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

• IvanU7n, Уже работает, правда цифры не считает. Если пишу например 2, то скрывает весь список, хотя должен оставаться элемент TWS Apple Airpods Pro 2.
• IvanU7n, Все, решил благодаря функции toString(). Спасибо большое за помощь!

Ответы:

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>