Categories: html css js

HTML・CSS・JavaScriptで作る！検索候補オートコンプリート機能の実装方法

検索ボックスに文字を入力すると、候補が自動的に表示される「オートコンプリート機能」。GoogleやAmazonなどの大手サイトでも採用されており、ユーザーの入力をサポートすることで利便性を大きく高めています。この記事では、HTML・CSS・JavaScriptを使って、シンプルながらも実用的な検索候補オートコンプリート機能を実装する方法を解説します。基本的な仕組みからコード例、デザインの工夫、応用的な機能追加まで順を追って学べる内容です。フロントエンド学習者や自作サイトに便利な検索機能を追加したい方におすすめです。

オートコンプリート機能とは？
1. 主なメリット
HTMLで検索ボックスを作成する
CSSで検索候補を見やすくデザインする
JavaScriptで候補を表示するロジック
入力補助の改善ポイント
サーバー連携で実用的な検索に
デザインをさらに工夫する
まとめ

オートコンプリート機能とは？

オートコンプリートとは、入力中の文字列に基づいて候補を提示する仕組みです。たとえば「ap」と入力すれば「apple」「application」「april」といった候補がリアルタイムで表示されます。

主なメリット

ユーザー体験の向上：目的のキーワードを素早く見つけられる。
入力ミスの軽減：候補をクリックすれば正確な単語を入力可能。
検索精度の向上：候補をあらかじめ提示することで検索の一貫性を保てる。

Webサイトに導入するだけでユーザーに「使いやすいサイトだ」と思ってもらえるため、集客やCVR向上にもつながります。

HTMLで検索ボックスを作成する

まずは土台となるHTMLを用意します。検索ボックスと候補を表示するための要素を作りましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>オートコンプリート検索</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="search-container">
    <input type="text" id="search-box" placeholder="検索ワードを入力...">
    <ul id="suggestions"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

ここでは、inputタグで検索ボックスを作り、候補を表示するためのulタグを用意しています。

CSSで検索候補を見やすくデザインする

次に、候補リストが見やすいようにCSSでスタイルを整えます。

/* style.css */body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.search-container {
  width: 300px;
  position: relative;
}

#search-box {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

#suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 10;
  display: none;
}

#suggestions li {
  padding: 8px;
  cursor: pointer;
}

#suggestions li:hover {
  background-color: #f0f0f0;
}

ポイントは、ulを検索ボックスのすぐ下に重ねることです。候補リストは通常非表示にし、必要なときだけ表示されるようにします。

JavaScriptで候補を表示するロジック

続いて、JavaScriptでオートコンプリートの処理を書きます。入力イベントを監視して、入力値に応じた候補を表示させます。

// script.js
const searchBox = document.getElementById("search-box");
const suggestions = document.getElementById("suggestions");

const keywords = [
  "apple", "application", "april",
  "banana", "book", "browser",
  "cat", "car", "camera",
  "dog", "door", "design"
];

searchBox.addEventListener("input", () => {
  const input = searchBox.value.toLowerCase();
  suggestions.innerHTML = "";

  if (input) {
    const filtered = keywords.filter(word => word.startsWith(input));
    if (filtered.length > 0) {
      suggestions.style.display = "block";
      filtered.forEach(word => {
        const li = document.createElement("li");
        li.textContent = word;
        li.addEventListener("click", () => {
          searchBox.value = word;
          suggestions.style.display = "none";
        });
        suggestions.appendChild(li);
      });
    } else {
      suggestions.style.display = "none";
    }
  } else {
    suggestions.style.display = "none";
  }
});

このコードでは、ユーザーが入力した文字に一致する単語をfilterで抽出し、リストに表示します。候補をクリックすると検索ボックスに反映され、リストは非表示になります。
下記インプットボックスのaやbを入力してみてください。検索候補が表示されます。

オートコンプリート検索

入力補助の改善ポイント

実際の運用で役立つ工夫をいくつか紹介します。

部分一致検索
先頭一致だけでなく、中間に含まれる単語も候補に表示することで柔軟性を高められます。

const filtered = keywords.filter(word => word.includes(input));

大文字小文字の区別をなくす
すでにtoLowerCase()を使っていますが、候補データ側も同様に処理すれば表記ゆれに強くなります。
外部データと連携
キーワードを配列に直接書くのではなく、APIやJSONファイルから取得することでスケーラブルになります。

サーバー連携で実用的な検索に

静的な配列では候補が限られるため、実用的にはサーバー側から候補を取得する仕組みが必要です。

async function fetchSuggestions(query) {
  const response = await fetch(`/api/suggest?query=${query}`);
  const data = await response.json();
  return data;
}

searchBox.addEventListener("input", async () => {
  const input = searchBox.value.trim();
  suggestions.innerHTML = "";

  if (input) {
    const filtered = await fetchSuggestions(input);
    if (filtered.length > 0) {
      suggestions.style.display = "block";
      filtered.forEach(word => {
        const li = document.createElement("li");
        li.textContent = word;
        li.addEventListener("click", () => {
          searchBox.value = word;
          suggestions.style.display = "none";
        });
        suggestions.appendChild(li);
      });
    } else {
      suggestions.style.display = "none";
    }
  } else {
    suggestions.style.display = "none";
  }
});

このようにすれば、候補は常に最新のデータに基づいて表示され、商品検索や記事検索にも活用できます。