【JavaScript】入力フォームの自動補完機能を実装する方法

<input list="cities" placeholder="都市名を入力...">
<datalist id="cities">
  <option value="東京"></option>
  <option value="大阪"></option>
  <option value="名古屋"></option>
</datalist>

<input type="text" id="ac-input" placeholder="入力してください...">
<ul id="ac-list"></ul>

const data = ["東京", "大阪", "名古屋", "札幌", "福岡", "横浜", "神戸", "京都"];
const input = document.getElementById("ac-input");
const list = document.getElementById("ac-list");

input.addEventListener("input", () => {
  const q = input.value.trim();
  list.innerHTML = "";
  if (q === "") return;

  // 部分一致で絞り込み（前方一致なら startsWith に変える）
  const matches = data.filter((item) => item.includes(q));

  matches.forEach((match) => {
    const li = document.createElement("li");
    li.textContent = match; // textContentで安全に
    li.addEventListener("click", () => {
      input.value = match;
      list.innerHTML = ""; // 選んだら閉じる
    });
    list.appendChild(li);
  });
});

#ac-list {
  list-style: none; margin: 4px 0 0; padding: 0;
  border: 1px solid #ccc; max-height: 150px; overflow-y: auto;
}
#ac-list li { padding: 8px; cursor: pointer; }
#ac-list li:hover { background: #eee; }

document.addEventListener("click", (e) => {
  if (e.target !== input && !list.contains(e.target)) {
    list.innerHTML = ""; // 外側ならリストを閉じる
  }
});

let timer;
let controller;

input.addEventListener("input", () => {
  clearTimeout(timer);
  timer = setTimeout(async () => {   // 300msの入力停止を待つ
    const q = input.value.trim();
    if (!q) return;

    controller?.abort();             // 前のリクエストを中止
    controller = new AbortController();
    try {
      const res = await fetch(`/api/suggest?q=${encodeURIComponent(q)}`,
        { signal: controller.signal });
      const items = await res.json();
      // items を使って候補リストを描画
    } catch (e) {
      if (e.name !== "AbortError") console.error(e);
    }
  }, 300);
});