目次
今回作成するもの
Bubbleでは「Search Box」というサジェスト機能がデフォルトでついているエレメントが用意されていますが、検索したいフィールドが複数ある場合や前方一致だけでなく、部分一致も含みたい場合などはサジェスト機能を自前で準備する方法が適しています。
今回は動物の鳴き声を検索するアプリの作成を想定しながら、上記機能をなるべく簡単に実装する方法をご紹介します。
＊Bubbleのアカウントをまだ作成していない方は、以下の記事を参考にアカウントを作成してください。
▶Bubble（バブル）の使い方を徹底解説！ノーコードでアプリを作ろう！
使用エレメント
- Text
- Input
- Group
- RepeatingGroup
作成手順
1. データの作成
まずデータのtypeとfieldを作成していきましょう。
今回はtypeをAnimal、fieldにnameとroarを追加してあげます。それぞれ動物の名前と鳴き声というfieldになります。
それぞれにあらかじめいくつかのデータを入れておいてあげましょう。
2. エレメントの配置
全体のエレメント配置から説明していきます。
Groupの中にInputとRepeating Groupを入れ、そのRepeating GroupのなかにTextを配置します。
それとは全く別のTextエレメントを横に配置します。
詳しくはElements treeを参照してください。
Groupにはtextのデータを受け取る役割があるので、Type of contentをtextに設定
inputのInitial contentにParent group’s textを設定します。
Repeating GroupのType of contentをtext、Data sourceは画像の通り設定します。
今回は動物の名前で検索をかけるため、nameを起点にcontainsを設定していますが、name部分を別のフィールドで検索をかけることで別の基準で検索結果を表示させることが可能です。
中のTextにはCurrent cell’s textを設定
隣に設置したテキストに関しては…edit me…を削除してください。
3. conditionalの設定
動物名が検索結果にヒットした状態になった場合に鳴き声を表示させたいため、conditonalを設定します。
ここではDo Search forを二度も使ってしまっているため、速度に若干の不安があります。今回はスキップしますが、stateなどに保存する方法を試してみてもいいかもしれません。
次にRepeating Groupが表示される状態をconditionalに設定し、表示非表示を切り替えるように設定する
inputが空の状態 👉 表示しない
inputがホバーされている状態 👉 表示する
inputの名前がある動物の名前と完全一致している状態 👉 表示しない
Repeating Group内のTextにはホバーされると青くなるように設定します。これは単純にわかりやすくするためです。
4. ワークフローの作成
今回設定するのはRepeating Groupの中にあるTextエレメントをクリックした際のワークフローのみです。
一度Inputのvalueをリセットし、そのあとにグループにTextのデータを渡すという処理を書きます。
これにより、グループが受け取ったtextデータはInputに入ることになり、検索が完了するという手筈になっています。
実際に使ってみた
試しに「ン」と打ち込んでみましょう。
するとサジェスト一覧が表示され、部分一致としてライオンとキリンが表示されます。
ライオンを選択するとサジェスト一覧は消え、鳴き声が表示されます。
次に「ライオン」と打ち込んでみましょう。
するとconditionalで設定したので、サジェスト一覧は表示されずに鳴き声が表示されるはずです。
このように少し工夫してあげると利用者のUXも向上しますので、是非参考にしてみてください。
