One of the limitations of using the builtin 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.
So let's just have a look at my data here. Gone with an avengers MCU theme. 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. So how will I go about doing that?
Pick a Fuzzy Search Plugin
Well, the way around it is to use a plugin like a fuzzy search. So I'm going to install Fuzzy Search by Zeroqode. Then 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 put it at the end. There we go.
Right, let's fill in some fields. So data type I wanted to search is contact. I want it to search through all of my contacts and then I can add in the fields.
Working around plugin limitations
Now it will only take text fields here, so you will have to find a further work around. 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 for example, in this data type contacts, I have an option set called country. And now in order for a search for United States to show up the contacts from the United States, I would create a new field called country text. And I would use a database trigger in back end workflows so that when the options sets country was changed, it would update the country text field and that way I can involve it in my field to search here.
What else do I need to set up here? So there are a number of parameters here. You can 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.
But mainly let's focus on here. I need to say match text in input text box. This is a search, so I need to get rid of that and instead put a text box in here.
Show ID attribute
Okay. And then I need to give it an ID attribute. Now, if you don't see this box down here, this is where you find it. In Settings > General > Expose options as an ID attribute to HTML elements. So when you 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.
Okay right, let's test it.
So 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 and let's start typing in here right.
Repeating group displays the search results
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 so 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 very quickly number of rows. Don't want to restrict that.
Okay so the repeating group is going to show contacts data source is not going to be a do a search for it will be a Search and Auto Complete A 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 inner bit the cell and then like anything else in a repeating group we can, I won't use a link because then I can't combine and then link to I've got 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 click on the contact and for them to be able to go through to the page I've created for that contact. Let's just add some paddling around it.
Testing
Okay cool. Okay now let's try that keyboard shortcut.
Okay there we go. So it is bringing up search results. Iron Man is being ranked top. Remember this is a plug in 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 secondary. It's being ranked below Tony Stark and you'd be able to kind of tweak the sensitivity by using the settings in here.
Let's just go back and watch that happen again and we'll tidy a few things up.
UX Improvements
So first of all when I hit my keyboard shortcut 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 so I can refer back to the plug-in and I can go for let's just go for matches I'll do matches count is not zero. Let's try Bruce Banner, there we go. We get one result let's try a different field. Let's try alias we'll go for Scarlet Witch there we go we get the result up.
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 fuzzy search, allows you to search across multiple fields in your database.
