言語学習

JavaScriptで検索機能をつける

1. 検索機能の概要

検索機能とは、Webページに表示されたデータの中から、ユーザーが入力したキーワードに一致する部分を抽出する機能です。具体的には、リストの中のアイテムやテキストなどを検索し、条件に合ったデータを絞り込んで表示します。

2. 必要なHTMLの作成

まずは、検索機能を実装するための基本となるHTMLを作成します。シンプルに、検索ボックスと、検索対象となるリストを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>検索機能の実装</title>
</head>
<body>
  <h1>検索機能の実装例</h1>
  
  <!-- 検索ボックス -->
  <input type="text" id="searchBox" placeholder="検索...">
  
  <!-- 検索対象のリスト -->
  <ul id="searchList">
    <li>アップル</li>
    <li>バナナ</li>
    <li>オレンジ</li>
    <li>グレープフルーツ</li>
    <li>イチゴ</li>
  </ul>

  <script src="script.js"></script>
</body>
</html>

このHTMLでは、inputタグで検索ボックスを作成し、ulタグ内に検索対象となるリストアイテムを並べています。

3. JavaScriptで検索機能を実装

次に、JavaScriptで実際に検索機能を実装します。ユーザーが検索ボックスに文字を入力したときに、リスト内のアイテムをフィルタリングして表示するようにします。

// 検索ボックスとリストを取得
const searchBox = document.getElementById('searchBox');
const searchList = document.getElementById('searchList');

// リストアイテムをすべて取得
const listItems = searchList.getElementsByTagName('li');

// 検索機能の実装
searchBox.addEventListener('input', function() {
  const searchText = searchBox.value.toLowerCase();  // 検索ボックスの値を小文字に変換
  
  // リストアイテムをループして表示・非表示を制御
  for (let i = 0; i < listItems.length; i++) {
    const itemText = listItems[i].textContent.toLowerCase();
    
    // 入力された文字列がリストアイテムのテキストに含まれているかチェック
    if (itemText.includes(searchText)) {
      listItems[i].style.display = '';  // 一致した場合は表示
    } else {
      listItems[i].style.display = 'none';  // 一致しない場合は非表示
    }
  }
});

このJavaScriptでは、以下のことを行っています：

  1. 検索ボックスの入力イベントを取得：inputイベントリスナーを使用して、ユーザーが検索ボックスに入力するたびに動作するようにします。
  2. リストアイテムのフィルタリング：toLowerCase()を使って、大文字と小文字の違いを無視して検索を行います。また、includes()メソッドを使用して、検索ボックスに入力された文字列がリストアイテムのテキストに含まれているかをチェックします。
  3. 表示・非表示の制御：条件に合致するリストアイテムは表示し、一致しないアイテムは非表示にします。

4. 動作確認

上記のコードを実行すると、検索ボックスに文字を入力するたびに、リストアイテムがリアルタイムでフィルタリングされます。例えば「オレンジ」と入力すると、「オレンジ」と一致するアイテムだけが表示され、他のアイテムは非表示になります。

5. 改良点

この基本的な検索機能をもとに、さらに以下のような改良を加えることができます：

  1. 検索結果の強調表示：一致した文字をハイライトすることで、ユーザーがどこを検索しているかがわかりやすくなります。
  2. 検索結果がない場合のメッセージ表示：検索結果がない場合には「結果がありません」と表示して、ユーザーにわかりやすくフィードバックを返すことができます。
const noResultsMessage = document.createElement('p');
noResultsMessage.textContent = '結果がありません。';
searchList.appendChild(noResultsMessage);

// 検索結果が存在する場合はメッセージを非表示
searchBox.addEventListener('input', function() {
  const searchText = searchBox.value.toLowerCase();
  let resultsFound = false;

  for (let i = 0; i < listItems.length; i++) {
    const itemText = listItems[i].textContent.toLowerCase();

    if (itemText.includes(searchText)) {
      listItems[i].style.display = '';
      resultsFound = true;
    } else {
      listItems[i].style.display = 'none';
    }
  }

  // 結果がない場合はメッセージを表示
  if (!resultsFound) {
    noResultsMessage.style.display = 'block';
  } else {
    noResultsMessage.style.display = 'none';
  }
});

6. まとめ

今回、JavaScriptを使ってシンプルな検索機能を実装しました。HTMLとJavaScriptの基本的な操作で、非常に使いやすい検索機能を作成できることがわかりました。

リストのフィルタリングだけでなく、検索結果の強調表示や、検索結果がない場合のフィードバックなど、さらに改善できる点も多いため、ぜひ自分のプロジェクトに応じてカスタマイズしてみてください！