《Bubble》フリーワード検索の実装方法（プラグイン有/無）
概要
データの一覧が表示されている状態から、入力したワードが含まれているデータを絞り込んで表示する機能について、「Fuzzy search & Autocomplete」というプラグインを使用した実装方法と、プラグインを使用しない実装方法の2種類に分けて解説していきます。
今回は例として「Book」というテーブルに「Title」のカラムを用意しています。
フリーワード検索の実装方法（プラグイン有/無）
フリーワード検索の実装（デザイン共通）
親Groupをつくり、そこに 検索ワードを入力するための「input」と検索のトリガーになる「Button」、検索結果を表示するための「Repeating Group」を配置。
input の Content format を「Text」に、Repeating Group の Type of content を「Book」に、その他パラメータは以下の通りに設定する。
フリーワード検索の実装（ワークフロー / プラグイン有）
Element Actions から Display list を選択。
「Search for Books」と設定してデータベース内から検索する対象のデータ型を指定し、Add a new constraint から「Title contains Input ~ 's value」という条件を追加して,Input に入力したワードを Titleに含んでいるデータを表示、つまり名前の部分一致で検索できるようにする。
📍「Fuzzy search & Autocomplete」プラグインを使った場合このように簡単に部分一致での検索が実装できますが、例えば「Book」のデータに「Title」以外のカラムがあった場合、条件を追加しようとしてもAnd検索になってしまうため「入力したワードが複数のカラムのいずれかに部分一致するデータ」の検索はできません。
この問題を解決するために、プラグインを使 用しない場合の実装方法も解説していきます。
フリーワード検索の実装（ワークフロー / プラグイン無）
①例として「Title」以外に「Content」というカラムを用意する。
②Element Actions から Display list を選択して「Search for Books」と設定するところまではプラグイン有りの流れと同じ。
③More から「:filtered」を選択して List filterのAdd a new constraint から「Advanced」を選択する。
④「This~」で Title を条件に追加して、正規表現に一致したものを取得する「:extract with Regex」を選択。
⑤正規表現を入力するウィンドウが表示されるので、検索条件にInputの値を設定する。
⑥List filterウィンドウに戻り、「:count>0」を条件に追加する。
⑦「or」に続けて①で追加した Content を条件に追加する。
これでInputに入力したワードが「Title」と「Content」のいずれかに含まれているデータを検索、つまり複数のカラムに対して部分一致をかけて検索ができるようになる。
📍「Advanced」に関して、or検索ができるという利点はありますが検索方法として効率的ではないです。
理由としては、「Search for ~」ウィンドウのconstraintで条件をつけた場合はその条件に合うデータだけをデータベースから取得するのに対して、「Advanced」で条件をつけた場合は一度データベースからすべてのデータを取得してから条件に合うデータを絞り込むといった流れになるため、効率が悪くなってしまいます。
まとめ
フリーワード検索について、「Fuzzy search & Autocomplete」プラグインを使用した場合の実装とそこで生じる問題を解決するための実装の2種類を解説しました。
記事の中で触れたAnd検索とor検索や正規表現については他の記事で詳しく解説しているので、気になる方は以下のリンクから記事をご参照ください。
▪ And 検索とor検索
▪ 正規表現