【Bubble】AND検索とOR検索を実装する方法

概要

今回はBubbleでAND検索とOR検索を実装する方法を解説します。

実装準備

1. デモデータを用意する

実装用にデモ用の物件データを用意しました。検証用に以下からダウンロードしてください。

<デモデータ概要>

物件データを想定したcsvデータです。

物件名	連番
駅徒歩	5分/10分/15分
間取り	ワンルーム/2K/3DK
建物種別	アパート/マンション/その他

2. エレメントを設置する

以下が完成ページです。

検索条件を選択するために、Dropdownに値を設定します。

今回は各Dropdownの選択肢を「Option sets」を用いて設定します。

以下のように選択肢に応じて、用意してください。

各DropdownのGroupにカスタムステートを設定します。

こうすることで、Dropdownで選択された値を保持できるようにします。

3. ワークフローを設定する

Dropdownで値が選択された際にワークフローを設定します。

以下のようにワークフローを設定することで、Dropdownの選択された値を保持します。

AND検索を実装する

検索ボタンをクリックした際に「Display list」ワークフローを設定します。

AND検索の場合は以下のように「Search for」の条件に各DropdownのGroupを設定することで実装できます。

OR検索を実装する

AND検索と同様に検索ボタンをクリックした際に「Display list」ワークフローを設定します。

OR検索の場合は以下のように「Search for」の条件を一つずつDropdownのGroupを設定します。

それぞれの「Search for」の値を「merged with」で合わせることでOR検索を実装できます。