How to implement lightning-fast case insensitive search in Bubble

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:

1. A text input (this is not a ‘search box’ or anything. just a normal text input field)

2. A repeating group

3. 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.

Some interesting stuff I came across

Build with Adi (ChirpTag) @theadityapati

No-Code communities played a huge role in my journey. Here are 9 communities you must join as a @bubble developer 👇 (Or an Indie Hacker in general!) 🧵

Josh @ Support Dept 👨‍💻 @JoshSupportDept

I'm a low-code @bubble dev, so I regularly drop javascript into my apps to fill gaps here and there. I'm keen to hear what you drop into your apps. Without fail, in most apps, I'll use javascript for 👇

Lola 🧪 @ojabowalola

There are thousands of plugins in the @bubble marketplace, and it's not always easy to find new interesting ones. Below are 11 official plugins to extend your Bubble apps that you might not have heard of ⬇️

Easlo @heyeaslo

Don't know SEO? Use @semrush Don't know web design? Use @carrd Don't know copywriting? Use @copy_ai Don't know graphic design? Use @canva Don't know app development? Use @bubble Lesson: You don’t need to know everything to start an online business.

That’s it. See you in two weeks.

Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 bubblehacks.io