Popup search box (command bar) triggered by a keyboard shortcut
In this Bubble.io tutorial video we demonstrate how to create a popup command bar or search box that is triggered by a keyboard shortcut - sometimes known as a omnibox or omnisearch. This tutorial shows how to use a Popup visual element, the Search Box input element and the Air Keyboard Shortcut plugin.
Unlock the power of omni search: Learn how to create a search function that lets users quickly navigate your entire app with just a keyboard shortcut!
Supercharge your UI: Discover how to implement a trendy pop-up search box that enhances user experience and streamlines navigation in your Bubble app.
Master the art of keyboard shortcuts: Elevate your app's usability by adding a convenient search feature triggered by a simple key combination.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.