Есть поиск для моего сайта. Надо чтобы он искал по атрибуту 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>
