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

A very popular UI element at the moment that I'm seeing in a lot of web apps is a Search Box that pops up using a keyboard shortcut and lets you search through any part of the app and quickly jump to different parts of it. This is sometimes called like omni Search Box or omni box. But in this video I'm going to demonstrate how to build one.

I have a contact app here and I'm going to show you how to use a keyboard shortcut to open a Popup that has a search field in it.

Popup element

Let's begin by setting up a Popup. Make it column just now. Then in this Popup I'm going to put a Search Box.

Let's just restyle this a little bit, get rid of the background and get rid of the border. I want it to look like the Popup itself is the Search Box. So let's just give it a little bit of padding all around and move the conditions just so that I'm in complete control of the styling. I missed off on the Popup. Oh I've done on margins. There we go. So actually I intended to put that in the Popup padding. There we go. That's why my 100% wasn't working on the width. Brilliant. Much better.

Search box

So my Search Box is sat in there and now I'm going to tell it what parts of my app to search.

So, with the default Bubble Search Box, you can basically search for one data type and one field. If you want to search multiple data types and multiple fields, then you'll need to look at like a fuzzy search plugin and do it using a text box.

We'll probably cover that in a future video, but for now we go on to contacts and then the field to search is name and that all looks good.

Keyboard shortcuts

So how do we trigger it with a shortcut?

Well, we can find a plugin that will allow us to do that. So let's try this one here, keyboard shortcuts. Then I think this is one of the ones where we have to drag an example of it onto the page anywhere. We'll do it in here that doesn't affect the styling.

Then the keys, a key combination which is not going to conflict with anything in the browser or anything that I've got set up, on my computer, on my Mac. So let's just try Command K. I've seen that used on other applications.

Workflow

Cool. So now how do you trigger that? Well, I think we go for when a keyboard shortcut that one is triggered, we show the Popup and we can even set the focus into the input of the Search Box. I've got a couple of Search Boxes on the page. Let me just check I've chosen the right one, so I'm just going to label that more clearly.

Here we go. And that's it. Preview there you go. Command K (CMD + K) brings up and I can type straight into it and go and select and then of course, nothing happens.

So I need to finally what I'm going to set up is navigate through to the profile page or like the contact detail page.

To do that I go for when an input value is changed and that's the search. So with a Search Box it's worth noting, if I go back in Bubble a Search Box acts like an input field but with added features. So if I start typing in here, I can extract that text which just says Tony as just like an ordinary text string. But as soon as I select one of my options because it searched my database and returned that result, that then changes the input of the Search Box.

Navigate > Go to page

So that's how I can pick up this when statements here and then I can navigate. Go to page. I think I've got profile page set up somewhere.

Let me just check in my demo. Yeah, I've got profile and very bad design but it will do for now.

There we go. It just got lost with all the demo pages rather that I'm working on in these videos. So I've got to send them through to contact profile here we go. So remember I said when you select a database item in the Search Box that becomes its value. The type text is just going to be text. There we go. And let's check that hit my shortcut Tony. Select Tony and there we go. Navigate through to Tony Stark's page.

Extras

So like I said, there are a number of improvements that you can make here. You can start using a fuzzy search. You would then need to build in a repeating group to take the place of the the drop down list that the Search Box provides because with a fuzzy search you'd need to use an input field rather than a Search Box. But once you get a head around that, it does work really well and you can build in that really popular UI feature whether you call it omni search or omni box or simply a Popup triggered by a shortcut.

 

Latest videos

lockmenu