Search across multiple fields in database with Fuzzy Search

Limitations of Bubble's Built-in Search Box

One of the limitations of using the built-in search box in Bubble is that it only allows you to search one field at a time. This video is picking up from a previous video where I showed how to make this pop-up search box like an Omni search, but the limitation like I've just said was that the default Bubble built-in search box will only let you search one field at a time.

Setting Up the Data Structure

Let's just have a look at my data here. I've gone with Avengers MCU theme and my contacts have got three fields: first name, last name, and alias, and I want to create a search box that is going to search through each of those fields.

Using Fuzzy Search Plugin

The way around it is to use a plugin like a fuzzy search, so I'm going to install a fuzzy search by Zeroqode. Because I want it to be part of this pop-up, I'm going to put my fuzzy search in here. This is one example where a plugin doesn't quite play so nicely with the new response engine, but my workaround for that is going to be to just push it at the end.

Configuring the Fuzzy Search

Let's fill in some fields. The data type I want to search is contact, I want to search through all of my contacts, and then I can add in the fields. Now it will only take text fields here, so you have to find a further workaround. For example, to put an option set in there, I use backend database triggers so that when an option set value is changed, I have another field in this data type called like so.

Using Backend Database Triggers

For example, in this data type contacts, I have an option set called country. Now in order for a search for United States to show up the contacts here from the United States, I would create a new field called country text and I would use a database trigger in backend workflows so that when the option set country was changed, it would update the country text field. That way, I can involve it in my field to search here.

Setting Up the Search Parameters

There are a number of parameters here you can kind of look up on GitHub under the technology that runs this plugin to understand what each of those do. There's a little explanation in the documentation the plugin developer includes. Mainly, let's focus on here. I need to say match text in import text box. This is a search, so I need to get rid of that and instead put a text box in here. Then I need to give it an ID attribute.

Adding the ID Attribute

If you don't see this box down here, this is where you find it in settings general: expose options add an ID attribute to HTML elements. When you've got that box ticked, you can put in a label here. It just needs to be unique, and then we put the same label in here.

Testing the Search Functionality

Let's test it. I have command K set up as my keyboard shortcut. Have a look at the previous video if you're unsure how to do that. Let's start typing in here. Nothing comes up, and that's because unlike the default search box default search element, I actually have to create a way of displaying the results.

Creating a Repeating Group for Results

Let's add that in. We're going to need a repeating group. In fact, I need to put these into a row, and that then means I can add in my repeating group below. I'm just going to do this very quickly. Number of rows, don't want to restrict that.

Configuring the Repeating Group

The repeating group is going to show contacts and its data source is not going to be a do a search for, it will be a search and auto complete. That's this element here matches. Then what I'll do is I'll just put a link in the search box and styling the cell. We can then, like anything else in a repeating group, use a link because then I can combine it.

Adding Profile Page Links

I've got a profile page because that's what I want my users to do when they've got a list of search results. I want them to be able to click on the page and to go through to a page I've created for that contact. Let's just add some padding around it.

Final Testing and Adjustments

Now let's try that. I keep a shortcut. There we go, so it is bringing up search results. It's being ranked top. Remember, this is a plugin that both allows you to have multiple fields and it is fuzzy search, so for some reason, it believes that Natasha Romanoff is also a valid second result, but it's being ranked below Tony Stark. You'd be able to kind of tweak the sensitivity by using the settings in here.

Improving User Experience

Let's just go back and watch that happen again and we'll tidy a few things up. First of all, when I hit my keyboard shortcuts, I want to set focus on my input. That offers a better user experience. Also, I want my repeating group to only show up when there are results and also when there is text in the search box.

Refining the Search Results Display

I can refer back to the plugin and I can go for matches, although matches count is not zero. This time let's try Bruce Banner. There we go, we get one result. Let's try a different field. Let's try the alias. We'll go for Scarlet, which there we go, we get the result up.

Conclusion

So there you have it. That is how to expand upon what you can do with the default search box by using a fuzzy search. Using a regular input field with that fuzzy search allows you to search across multiple fields in your database.