How to implement lightning-fast case insensitive search in Bubble

Jul 30, 2022

How to implement lightning-fast case insensitive search in Bubble

Hey there 👋

So here is the thing, building search features in Bubble apps is hard. There is a bunch of ‘fuzzy search’ and ‘search & autocomplete’ plugins, but in my experience, they are all either slow, expensive, or unreliable.

The main reason for this is that these search plugins live in the front-end of your application, which means they run locally on your laptop or phone. Therefore they need to 1) download a ton of data and then 2) use your limited local computing power and memory to do all the searching (shout out to Petter Amlie for clarifying this here).

So, let’s build our own super-fast search function that can search data directly in Bubble’s database without downloading it first.

Let’s say I have a messaging app, and I want to add the capability to search for conversations by user email address or message content:

Setup

There are three main parts to this:

A text input (this is not a ‘search box’ or anything. just a normal text input field)
A repeating group
Database structure:
1. Conversations: contains a data field ‘conversation parts’ (list): these are the users that are part of this conversation
2. Messages: contains a field ‘conversation’: this is the conversation the message belongs to.

Here is the implementation:

In my setup, the RG is hidden on page load and becomes visible if the user starts typing in the search input.

And then we can set up the data source for our repeating group:

First, we search for all the messages that have a parent conversation where the current user is a part of (i.e. all the user’s sent or received messages)

with

and then we filter it using an advanced filter to compare each message with the text in our input field:

with arbitrary text 1

and arbitrary text 2

We use the :uppercase method to convert all the texts to UPPERCASE. The reason we need to do this is that Bubbles filters are case-sensitive. So ‘Hey’ and ‘hey’ differ from Bubble’s point of view. That’s why we convert them to ‘HEY’ and ‘HEY’ and make them equal.