const input = document.createElement("input");
input.type = "search";
input.placeholder = "Search users...";
document.body.appendChild(input);

const results = document.createElement("ul");
document.body.appendChild(results);

let timerId;

input.addEventListener("input", () => {
  clearTimeout(timerId);
  const query = input.value.trim().toLowerCase();
  if (!query) {
    results.innerHTML = "";
    return;
  }
  timerId = setTimeout(async () => {
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      const users = await res.json();
      const matches = users.filter((u) => u.name.toLowerCase().includes(query));
      results.innerHTML = matches.map((u) => `<li>${u.name} - ${u.email}</li>`).join("");
    } catch (err) {
      results.innerHTML = `<li>Error: ${err.message}</li>`;
    }
  }, 300);
});