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

入力フォームに自動補完機能（オートコンプリート）を追加することで、ユーザーの入力作業を効率化し、入力ミスの防止にもつながります。本記事では、JavaScriptを使って簡単なオートコンプリート機能を実装する方法をご紹介します。

自動補完の概要
基本的なHTML構造
JavaScriptによるオートコンプリートの実装
CSSで候補リストを整える
発展：候補をサーバーから取得するには？
まとめ

自動補完の概要

オートコンプリート機能とは、ユーザーが入力を始めた際に、それに一致する候補をリアルタイムで表示し、選択できるようにする仕組みです。たとえば、都道府県や駅名、製品名など、あらかじめ決められた選択肢の中から提案を行います。

基本的なHTML構造

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

JavaScriptによるオートコンプリートの実装

次に、JavaScriptで候補表示のロジックを実装します。

const dataList = [
  "東京", "大阪", "名古屋", "札幌", "福岡", "広島", "仙台", "横浜", "神戸", "京都"
];

const input = document.getElementById("autocomplete-input");
const suggestionList = document.getElementById("suggestion-list");

input.addEventListener("input", () => {
  const query = input.value.toLowerCase();
  suggestionList.innerHTML = "";

  if (query === "") return;

  const matches = dataList.filter(item =>
    item.toLowerCase().startsWith(query)
  );

  matches.forEach(match => {
    const li = document.createElement("li");
    li.textContent = match;
    li.addEventListener("click", () => {
      input.value = match;
      suggestionList.innerHTML = "";
    });
    suggestionList.appendChild(li);
  });
});

CSSで候補リストを整える

#suggestion-list {
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 0;
  list-style: none;
}

#suggestion-list li {
  padding: 8px;
  cursor: pointer;
}

#suggestion-list li:hover {
  background-color: #eee;
}