Webアプリを作る時に、検索画面、というのはよくありますよね。
外部のDBを使用する場合もあるかと思いますが、ここでは、BubbleのDataを使って検索する方法をお伝えします。
検索画面を作ってみよう
まずは簡単に検索画面を作ります。 ここでは、宿泊先を検索するアプリを作ってみましょう。
まずは、Data「Hotel」を作成し、Typeに「Name」（Text）、「Address」（Text）を追加します。
画面は、検索キーワードを入力するInputと、検索ボタン、結果を表示するRepeating Groupを配置します。 Repeating Groupの中には、ホテル名と住所を表示するようにします。
Workflowで、検索ボタンクリックしたら検索表示を変更するアクションを追加します。
次から本題の検索方法について説明します。
containsは使えない？
検索ボタンをクリックしたら、検索条件のキーワードを含むホテル名または住所を検索できるようにしたいと思います。
部分一致検索を行うことになりますが、SQLだと、LIKEで簡単に検索できますね。しかし、Bubbleだと少しテクニックが必要です。
Bubbleでは、Dataを検索する際に等号の他に、「contains」があります。 一見LIKE検索ができるのでは？と思ってしまいますが、実は、これはワード単位の検索になっています。 英語等他の言語ならそれでも良いのかもしれませんが日本語でワード検索は無理ですよね。
となるとcontainsは使用できないので、どのようにしたら部分一致検索ができるのでしょうか。
filterを使ってみよう！
部分一致検索をするためには、「Filter」と正規表現を使いましょう。
まず、Data sourceで、Do a Search forよりHotelを検索します。
「Search for Hotels」の後に「More」が出てくるので、「:filtered」を選択します。
選択すると、「List filter」という別ウィンドウがでてくるので、そこで「Advanced」を選択しましょう。
ここで、Nameをまず条件に追加します。
正規表現に一致したものを取得する「:extract with Regex」を選択します。
選択すると、正規表現を入力するウィンドウが表示されますので、検索条件のInputの値をトリムして入れます。 未入力の場合も検索したいので、「.*」も最初につけておきます。
またfilteredのList filterウィンドウに戻り、「:count」を選択し、0より大きい、を条件に追加しましょう。
これで部分一致の検索ができます。
ここでは名前か住所どちらかに部分一致すれば結果に表示するので、filterにorを追加して同じように住所も条件に入れるように設定します。
これで、検索のキーワードに一致する検索ができるようになりました。
一見にして分かりにくい部分一致検索方法ですが、部分一致ではなくても、通常に正規表現の検索する場合も同じ方法ですので、覚えておくと良いでしょう。
今回のサンプルURL： https://select-sample-nocodelab.bubbleapps.io/
ここまで読んでいただき、ありがとうございました。
参考URL
以下の記事で Input を Search Box にした場合についてご紹介しています。
