Custom Dropdown with Search

Adding a Custom Search to the Custom Dropdown

Let's add a custom search to our custom dropdown that I built in a previous video. We've got this drop-down 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.

Learning Bubble and Building MVPs

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 and you can follow a link down in the description.

Adding Search Functionality

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 also correct.

Installing the Search Plugin

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 also complete tips. So that's the one that we're using.

Setting Up the Search Input

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.

Configuring the Search Input

So we'll say search for contact... and it's going to be type text and I'm going to need to give it an ID attribute and that's because the fuzzy search plugin needs to know what input on the page to target to look for input text.

Enabling ID Attribute

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.

Setting Up the Fuzzy Search Plugin

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 the Search Fields

The data type is going to search through his 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 fields 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.

Setting Up the Search Workflow

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 notice 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 could be troublesome here because you... 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 box's value and this is live quicker, it hasn't got that delay and so I can say a 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.

Reviewing the Workflow

Let's now just re-examine the workflow that we've got on here so when this is clicked let's go into the events and so we say toggle... 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 it... we'll say when a condition is true and we'll say when the group focus is visible I want to set focus 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 gonna try it.

Testing the Search Functionality

Let's go back to our preview. Okay it's set focus that's nice and then I'm gonna search for pepper and you see we only get one result and I click on pepper goes back clicking here again in fact you can see I misspelled pepper and it still returned the same results that's because the fuzzy search nature and you can kind of loosen that or tighten that in the plugin parameters and that's 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 could search for United Kingdom and you can see here from my other repeating group of just all contacts that I'm getting Wanda back because Wanda has got a text fields in the database for that record of United Kingdom and so I can select Wanda.

Conclusion and Learning Resources

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 sass app MVP development journey with no code building it with Bubble.io.