国内初!bubble公式開発試験に合格!

【Bubble】フリーワード検索を実装する方法

概要

データに指定したワードが含まれているか検索する機能をBubbleで実装する方法を解説します。今回は日本語検索にも対応した「Fuzzy search & Autocomplete」プラグインを使用します。

Bubbleでフリーワード検索を実装する方法

1. エレメントの配置

同一Group内に検索ワードを入力する「input」と検索結果を表示する「Repeating Group」、検索を開始する「Button」を配置します。※今回はテストデータとして都道府県(prefectures)データに予め用意しています。

親Groupは今回textのデータを元に検索する為、Type of contentを「text」に設定します。

input には検索キーワードを「text」で実施する想定とし、Type of contentを「text」に設定します。

RepeatingGroup には今回検索対象となる都道府県(prefectures)を表示させる為、Type of contentを「prefectures」に設定します。

2. ワークフローの設定

今回は、Buttonエレメントをクリックした際に、inputに入力したキーワードで検索するワークフローを設定します。

クリック時にRepeating Groupの検索結果に表示されうワークフローを作成します。

Data sourceに「Search for prefecturess」を設定します。

また都道府県名で検索する為、nameを基準にクリック時にinputエレメントに入力されていた値をもとにcontainsを設定しています。

資料請求

Swoooのサービス資料をダウンロードいただけます。開発支援をご検討の方はぜひご一読ください。

ご相談・お問い合わせ

お客様の新規事業開発やマーケティング活動における課題解決をサポートします。
お気軽にご相談ください。

料金シミュレーション

たった2分で開発費用が分かります。
簡単な質問に答えるだけでお見積りが可能です。