はじめに
このプロジェクトでは、Vue.js 2.x を使って入力検索サジェスト機能を実装する方法を学びます。この機能は、Web アプリケーションで一般的に使われ、ユーザーが検索入力欄に入力する際に一致するデータのリストを提供します。
👀 プレビュー
🎯 タスク
このプロジェクトで学ぶことは以下の通りです。
- データテーブルのテーブルヘッダーの先頭文字を大文字にする方法
- ユーザーの入力に基づいて検索サジェスト機能を実装する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
v-forやv-modelのような Vue.js のディレクティブを使って DOM を操作する- Vue.js でコンピュートドプロパティを作成して、検索結果をフィルタリングして表示する
- テーブルと検索入力に基本的なスタイルを適用する
プロジェクト構造をセットアップする
このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── index.html
└── js
└── vue.js
その中で：
js/vue.jsは Vue 2.x のファイルです。index.htmlはページレイアウトと機能実装のロジックコードです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
検索サジェスト機能はまだ実装されていません。
テーブルのヘッダーを大文字にする
このステップでは、データテーブルのテーブルヘッダーの先頭文字を大文字にする方法を学びます。
- コードエディタで
index.htmlファイルを開きます。 - HTML コードの中からテーブルヘッダーのセクションを探します。
<thead>
<tr>
<td v-for="col in columns">
{{col.slice(0,1).toUpperCase() + col.slice(1)}}
</td>
</tr>
</thead>
v-forディレクティブはcolumns配列をループして、対応するテーブルヘッダーを表示します。コード{{col.slice(0,1).toUpperCase() + col.slice(1)}}は、各列名の先頭文字を大文字にするために使用されます。col.slice(0,1)は列名の最初の文字を抽出します。.toUpperCase()は最初の文字を大文字に変換します。+ col.slice(1)は大文字に変換された最初の文字と列名の残りの部分を連結します。
index.htmlファイルを保存してページを更新します。この時点で、先頭文字が大文字になったテーブルヘッダーが表示されるはずです。
検索サジェストを実装する
このステップでは、検索サジェスト機能を実装する方法を学びます。
index.htmlファイルの中で、検索入力欄と対応する Vue.js コードを探して、以下のようなコードを追加します。
<span>Search for names: </span>
<!-- v-model コードを追加 -->
<input placeholder="Enter the name to search" v-model="searchQuery" />
data: {
searchQuery: "",
//... その他のデータプロパティ
},
// 以下のコードは追加する必要があるコードです
computed: {
newData() {
return this.data.filter((item) => {
return item.name
.toLowerCase()
.includes(this.searchQuery.toLowerCase());
});
}
}
searchQueryデータプロパティはv-modelディレクティブを使って検索入力欄にバインドされています。これにより Vue.js インスタンスがユーザーの入力を追跡できるようになります。newDataコンピュートドプロパティはsearchQueryの値に基づいてdata配列をフィルタリングします。各データ項目のnameプロパティに検索クエリが含まれているかどうか（大文字小文字を区別しない）を確認します。- フィルタリングされたデータは次にテーブルの本体に表示されます。
<tbody>
<tr v-for="entry in newData">
<td v-for="col in columns">{{entry[col]}}</td>
</tr>
</tbody>
v-forディレクティブはnewData配列をループして、各データ項目をテーブルの行に表示します。index.htmlファイルを保存してページを更新します。この時点で、検索サジェスト機能が期待通りに動作するはずです。
これで、提供された Vue.js プロジェクトにおける入力検索サジェスト機能の実装が完了しました。完成した結果は以下の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。
