xXLareMoonXx
@xXLareMoonXx

Как сделать поиск?

Есть поиск для моего сайта. Надо чтобы он искал по атрибуту name, а не по содержимому объекта.

window.onload = () => {
	let input = document.querySelector('#input');

	input.oninput = function() {
		let value = this.value.trim();
		let list = document.querySelectorAll('.ul li');

		// if (value) {
		// 	list.forEach(elem => {
		// 		if (elem.innerText.search(value) == -1) {
		// 			elem.classList.add('hide');
		// 		}
		// 	});
		// } else {
		// 	list.forEach(elem => {
		// 		elem.classList.remove('hide');
		// 	});
		// }

		value
			? list.forEach(elem => {
					elem.innerText.search(value) == -1
						? elem.classList.add('hide')
						: elem.classList.remove('hide');
			  })
			: list.forEach(elem => {
					elem.classList.remove('hide');
			  });
	};
};


.hide {
  display: none;
}


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<link rel="stylesheet" href="style.css" />
		<title>Document</title>
	</head>

	<body>
		<div class="wrap">
			<h1 class="h1">live search</h1>
			<input type="text" id="input" class="input" />
			<div>
				<ol class="ul">
					<li><h1 name="lol">a</h1></li>
					<li><h1 name="lolo">ab</h1></li>
					<li><h1 name="lollo">abc</h1></li>
					<li><h1 name="lolhello">abcd</h1></li>
					<li><h1 name="lol hello world">a</h1></li>
				</ol>
			</div>
		</div>
		<script src="./main.js"></script>
	</body>
</html>
  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ответы на вопрос 1
sanchezzzhak
@sanchezzzhak
Ля ля ля...
value
      ? list.forEach(elem => {
      let name = elem.querySelector('h1');    name.getAttribute('name').indexOf(value) === -1
            ? elem.classList.add('hide')
            : elem.classList.remove('hide');
        })
      : list.forEach(elem => {
          elem.classList.remove('hide');
        });
  };
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы