A list you can search

A list you cannot search becomes a scroll people abandon in the sun. Make a page with names (or goods) and a box that hides the ones that do not match.

What you will make

A single HTML file: a heading, a search box, and at least eight rows. Church roster, class list, or kiosk catalog — pick the one you can fill with real or clearly fake names.

<label>Find a name <input id="q" type="search" /></label>
<ul id="list">
  <li>Ama Boateng — door</li>
  <li>Kojo Mensah — store</li>
  <li>Efua Addo — choir</li>
</ul>
<script>
  const q = document.querySelector("#q");
  const items = [...document.querySelectorAll("#list li")];
  q.addEventListener("input", () => {
    const needle = q.value.trim().toLowerCase();
    for (const item of items) {
      item.hidden = needle.length > 0 &&
        !item.textContent.toLowerCase().includes(needle);
    }
  });
</script>

Type am — Ama stays, Kojo goes. Clear the box — everyone returns. That is the whole app.

Acceptance

• Works with a thumb; the input is large enough.
• Empty search shows the full list.
• A search with no match does not crash. The list is allowed to look empty.
• No library. No login.

Keep this file. The shop catalog and roster ideas are this page with better copy.