JavaScript による検索機能 | プログラミングチュートリアル

はじめに

このプロジェクトでは、JavaScript を使って簡単な検索機能を実装する方法を学びます。入力イベントを入力ボックスにバインドし、検索データを処理し、検索結果を表示する方法を学びます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

入力ボックスにinputイベントをバインドする方法
検索データをフィルタリングするためのhandleInputメソッドを実装する方法
検索結果をリストにレンダリングする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

addEventListenerメソッドを使ってイベントをバインドする
条件に基づいて配列をフィルタリングするためのfilterメソッドを使う
検索結果を更新するために DOM を操作する

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

ここで：

index.html はメインページです。
css はプロジェクトのスタイルを格納するフォルダです。
js/index.js はコードを追加する必要がある JavaScript ファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

検索結果をレンダリングする

このステップでは、検索結果を表示するためのrenderメソッドを実装します。

js/index.jsファイルで、searchオブジェクト内のrenderメソッドを探します。
renderメソッドの中に、以下のコードを追加して、検索結果用の HTML テンプレートを生成し、listEl要素を更新します。

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

reduceメソッドは、data配列の各項目のcontentプロパティを表示する HTML テンプレート文字列を作成するために使用されます。

handleInput メソッドを実装する

このステップでは、検索機能を処理するためのhandleInputメソッドを実装します。

js/index.jsファイルで、searchオブジェクト内のhandleInputメソッドを探します。
handleInputメソッドの中に、以下のコードを追加して、入力値に基づいてdata配列をフィルタリングし、その後検索結果をレンダリングします。

const value = e.target.value;
// Use timer to simulate ajax send request, data receive data
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

setTimeout関数は、検索データを受け取るための非同期操作（たとえば AJAX リクエスト）をシミュレートするために使用されます。

入力イベントをバインドする

このステップでは、inputイベントを入力ボックスにバインドし、入力ボックスの値が変更されたときにhandleInputメソッドを呼び出す方法を学びます。

js/index.jsファイルを開きます。
searchオブジェクト内のhandle関数を探します。
handle関数の中に、以下のコードを追加して、inputイベントをinputEl要素にバインドし、handleInputメソッドを呼び出します。

this.inputEl.addEventListener("input", this.handleInput.bind(this));

bind(this)の部分は、handleInputメソッド内のthisがsearchオブジェクト自体を指すようにするために重要です。

これらの 4 つのステップを完了すると、js/index.jsファイルには検索機能の完全な実装があり、プロジェクトは期待通りに動作するはずです。最終的な結果は以下の通りです。

✨ 解答を確認して練習

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行ってみましょう。

シンプルな検索機能の構築