一覧(リスト)に検索窓を設定｜初心者のアプリ開発｜Adalo

一覧リストにデータが増えてきたら、探すのが大変ですよね。

今日は検索窓を用意して、キーワードで一覧の中のデータを絞る方法を紹介します。

ちょっとした条件を追加するだけで、簡単にできますよ。 

この記事を読むとわかること・・・

・リストに検索窓を設定し検索できるようにする方法

今日の最終的な一覧イメージ〜

前回まで作成してきたレッスン日誌の曲名を検索できるようにします。

一覧リストの上に検索窓を用意（ちょっと色が薄いかな・・・？）

検索窓に「きらきら星」を入力して、その曲を練習した日だけを表示します。

入力エリアの設定 

Step1

1. 左上の「＋」を選択
2. ADD COMPONENT を選択
3. Forms & Fields を選択
4. Text input を選択
5. 右側の画面で配置したい場所をクリック

Step2

1. 配置したText Inputを選択
2. Placeholder に入力してもらいたい項目名を記載

今日は曲名検索なので、「曲名を入力」としました。

入力エリアに薄くPlaceholderのメッセージが出ています。

リスト・一覧の表示条件設定 

入力エリアが用意できたので、続いて一覧リストに表示条件を追加します〜

Step1

1. 右側の画面内のCard Listを選択
2. 左側に表示される + ADD ANOTHER FILTER を選択

Step2

Custom Filter の設定欄が追加されます。

1. Select column... を選択

Step3

「レッスン日誌」コレクションの項目一覧が出てきます。

今日は「曲名」で検索するので、「曲名」選択。

Step4

曲名を何の値で絞るか設定します。

1. Empty を選択

Step5

1. Form Inputs を選択
2. Input を選択

ここのInputは最初に設定した検索窓のお名前です。

Step6

「きら」と入力した時でも「きらきら星」が結果に出るように設定します。

1. is equal to を選択 

Step7

1.  Contains を選択

３つの条件の使い分けはこんな感じです。

• is equal to ：入力した値と曲名が完全一致
• is not equal to ：入力した値と曲名が一致しない
• Contains  ：入力した値が曲名に含まれる

Preview

では、設定ができたので、画面右上の▶︎Previewを選択肢、動かします！

ドキドキ・・・

・・・

検索窓出ていますね！

では、「きらきら」と入力しましょう・・・

「きら」だけで「きらきら星」を含むレッスン日誌が絞れました〜！

Enterキーを押す必要はなく、入力するたびにリストが絞られていきます。 

 

まとめ

今日はあると便利な検索窓を試してみました〜！

結構簡単ですよね。

一覧リストのデータが多すぎる時には、追加してみてください。