Popup search box (command bar) triggered by a keyboard shortcut

Setting Up a Pop-up Search Box

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 an omni search box or an omni box but in this video I'm going to demonstrate how to build one. So I have a contact app here and I'm going to show you how to use a keyboard shortcut to open a pop-up that has a search field in it.

Creating the Pop-up

Let's begin by setting up a pop-up and let's make it column just 800 wide for now and then in this pop-up I'm going to put a search box. So let's just restart this a little bit get rid of the background and get rid of the board. I want it to look like the pop-up 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. Oh I've done that on margins there we go. So actually I intended to put that in the pop-up padding there we go that's why my 100% wasn't working on the width. Brilliant much better so my search box is sat in there and now I'm going to tell it what parts of my app to search.

Configuring the Search Box

With the default Bubble search box you can basically search 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.

Implementing 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 and then I think this is one of the ones where we have to drag an example of it onto the page. Yep anywhere we'll do in fact let's just put it in here. That doesn't affect the styling and then the keys so I need to pick a key combination which is not going to conflict with anything in the browser or anything that I've got set up on my own computer on my Mac. So let's just try command K as I've seen that used on other applications.

Setting Up the Trigger

Cool so now how do we trigger that? Well I think we go for when a keyboard shortcut that one is triggered we show the pop-up and we can even set the focus into the input of the search box. Oh I've got a couple of search boxes on the page let me just check I've chosen the right one. No so I'm just going to label that more clearly. There we go and let's hit preview. There you go command 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.

Creating the Navigation Workflow

So to do that I go for when an inputs value is changed and that's the search and then so with a search box it's worth noting if I go back that 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 a just like an ordinary text string but as soon as I select one of my options because it searched my database and return that result that then changes the input of the search box so that's how I can pick up this when statement here and then I can navigate go to page I think I've got profile page set up somewhere let me just check my demo I've got profile and very bad design but it will do for now I've lost where there we go just got lost in all that with all the demo apps and demo demo pages rather that I'm working on in these videos so I've got the cemetery to contact profile here we go and then this search boxes 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.

Potential Improvements

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 kind of 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 head around that they do work it does work really well and yeah you can build in that really popular UI feature whether you call it anomaly search or anomaly box or simply a pop-up triggered by a shortcut yeah there you have it.