【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を設定しています。