【jQuery】検索フォームに入力されたキーワードに基づいてサジェスト機能を実装する方法

ウェブサイトやアプリケーションにおいて、検索フォームに入力されたキーワードに基づいてサジェスト機能を提供することは一般的な機能の一つです。
この記事では、JavaScriptとjQueryを使用して、サジェスト機能を実装する方法について事例を紹介しながら解説します。
手順を追って、実際に動作するサジェスト機能を作成してみましょう。

今回は例として、「果物のサジェスト機能を実装する方法」で解説します。

HTMLの準備
JavaScriptでのサジェスト機能の実装
CSSでのスタイリング
まとめ

HTMLの準備

まずはHTMLの構造を準備しましょう。以下のように、検索フォームとサジェスト候補を表示するためのコンテナを用意します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptとjQueryを使用して果物のサジェスト機能を実装する方法</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>果物を検索する</h1>

<input type="text" id="search-input" placeholder="果物を検索">
<div id="suggestions"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

JavaScriptでのサジェスト機能の実装

次にJavaScriptを使用して、果物のサジェスト機能を実装します。入力されたテキストに基づいて果物のリストからマッチングする候補を抽出し、それを画面に表示します。

$(document).ready(function(){
  const fruits = ["Apple", "Banana", "Cherry", "Grape", "Lemon", "Orange", "Peach", "Pear", "Strawberry"];

  $("#search-input").on("input", function() {
    const searchText = $(this).val().trim().toLowerCase();
    let matchingFruits = [];

    if (searchText) {
      matchingFruits = fruits.filter(function(fruit) {
        return fruit.toLowerCase().startsWith(searchText);
      });
    }

    displaySuggestions(matchingFruits);
  });

  function displaySuggestions(suggestions) {
    const suggestionsContainer = $("#suggestions");
    suggestionsContainer.empty();

    suggestions.forEach(function(suggestion) {
      const suggestionElement = $("<div class='suggestion'></div>").text(suggestion);
      suggestionsContainer.append(suggestionElement);
    });

    $(".suggestion").click(function() {
      const selectedSuggestion = $(this).text();
      $("#search-input").val(selectedSuggestion);
      suggestionsContainer.empty();
    });
  }
});

CSSでのスタイリング

最後にCSSでサジェスト候補のスタイルを設定します。

#suggestions {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

.suggestion {
  padding: 5px;
  cursor: pointer;
}

.suggestion:hover {
  background-color: #f0f0f0;
}

これで、JavaScriptとjQueryを使って果物のサジェスト機能を実装する準備が整いました。実際の動作を確認してみましょう。