Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Custom Dropdown with Search

Let's add a custom search to our custom dropdown in Bubble.io

Adding Search to Custom Dropdown in Bubble.io

Let's add a custom search to our custom dropdown that I built in a previous video. So we've got this dropdown here which when I click on it, it brings up a repeating group. In a group focus, we can choose a different contact in our database and we can easily swap between them and we can refer to that group to get that contact out. So let's add in search. But before I do that, if you're learning bubble, if you're building an MVP and you want to do it with no code, then there's no better place to learn how to do that than planetnocode.com.

Limitations of the Default Search Element in Bubble.io

And you can find a link down in the description. So let's add in search. Now the search element, this one here in bubble has got some limitations. It searches across only one field and that field has to be text. And also it needs to be like an exact match.

There's no fuzzy search. So I'm going to use a plugin called search and autocorrect. And to install that you go into the plugins tab and you click Add plugins. And it is, I've got a lot of plugins here from a lot of previous demos, fuzzy search and autocomplete hip. So that's the one that we're using.

Replacing Default Search Element with Custom Input

So that means that I don't need to use the default search element, I'm not using this input, I'm going to just use a regular input and place that in the group focus. Now there does seem to be a bug here, which is that the group focus forgets that it is attached to a particular anchor to a particular element. I'm just going to ignore that. I don't think it really plays out and matters. So we'll say search for contact, dot, dot dot, and it's going to be type text and I'm going to need to give it an id attribute.

Installing and Configuring the Fuzzy Search Plugin

And that's because the fuzzy search plugin needs to know what input on the page to target to look for input text. So if you don't see this by the way, you go into settings and general and scroll all the way down to the bottom and you can toggle a tick box that says show id attribute. And it's basically a way of you inserting your own way of identifying a particular element on the page. So I'm just going to call this search and then take my fuzzy search visual element. And this is simply because a lot of the time when you're using a plugin that does something actually on the page, it has to load in a certain script library, software library.

So you have to add it to the page in order for that to load in. I'm just going to rearrange this by putting my search box make 100% and putting it at the very top. There we go. And then my search plugin element here, I effectively just want to hide this. So just make that one pixel high, leave it at the bottom.

Configuring Search Parameters

So the data type is going to search through contacts and then the data source is going to be just not that one, not an option set. I'm just going to search all the contacts in my database and then the fields to search. So I can now choose from any text field here. So I'm actually going to go for first name, last name, I think that's a full name field. And also I could go for like country and then the text to match.

I want to say focus in on an input and that input is the one that I've given the id attribute of search. Okay, now on my repeating group here, which is my result. So when I click on the group it's going to show all of them, but I want to be able to filter that down. So I'm going to say when find the fuzzy search plugin. Now you might have noticed if you've been using bubble for a while that often the content of an input is only detected when you click out of that input.

And that can be troublesome here because what we want to do is basically say when more than three characters have been entered into the input, we want to swap from all contacts to the results of the search. And so I can't just target the input and do a character count because that is going to be too slow. But thankfully the fuzzy search plugin allows me to target the input boxes value and this is live quicker. It hasn't got that delay. And so I can say number of characters is equal to or greater than three and then I'm going to change the data source so it isn't now do a search for which is what we see here, search for contacts.

It's going to be instead the fuzzy search plugins matches. Okay, so I'm swapping the data source from all contacts in the database to the contacts returned by the search plugin. Let's now just reexamine the workflow that we've got on here. So when this is clicked, let's go into the events. And so we say toggle.

Setting Focus on Group Focus

So hide will show the group focus. Now what we could do here is to say, actually I wonder if this does work with group focus. We'll try. We'll say when a condition is true, and we'll say when the group focus is visible. I want to set focus.

Testing Search Functionality

And the reason I'm just trying this approach is that I don't want it to be on the toggle because I don't want to set focus. If I hide the group focus, I just want it to be set when it's visible. So yeah, this might have an interesting behavior, but I'm going to try it. So let's go back to our preview.

Okay, it's set focus. That's nice. And then I'm going to search for pepper. And you see we only get one result and I click on pepper, goes back. Click in here again.

In fact, you can see I misspelled pepper and it still returned the same results. That's because of the fuzzy search nature and you can kind of loosen that or tighten that in the plugin parameters. But one of the main benefits here is that I can search for data that isn't actually being displayed in the repeating group. For example, country. I can search for United Kingdom and you can see here from my other repeating group of just all contacts that I'm getting wander back because wonder has got a text field in the database for that record of United Kingdom.

And so I can select Wanda. So there you go. Remember, if you are learning bubble, then click on the link down in the description just down there because we've got hundreds of bubble tutorial videos just like this one to help accelerate your SaaS app MVP development journey. With no code building, it's with bubble.

Latest videos

lockcrossmenu