Filtering with CSS

<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script> <s-users count = 100></s-users> 

const element = swiss.element; function view(users) { return ` <input type="text" id="filter" class="input" placeholder="search user..."> <style id="cssFilter"></style> <ul> ${users} </ul> `; } function FakeUsers(el) { const count = parseInt(el.getAttribute("count")) let users = [...Array(count)]; users = users.map(() => faker.name.findName()); listUsers = users.map((u) => `<li data-name="${u}">${u}</li>`).join(""); return view(` <style>li{display: none;}</style> <div>${listUsers}</div>` ); } swiss.element("s-users", FakeUsers); window.filter.addEventListener("input", e => { let filter = e.target.value; let css = filter ? ` li[data-name*="${filter}" i] { display: list-item; } ` : ``; window.cssFilter.innerHTML = css; });