Is there a way to display the searchbox element “dropdown” as soon as the searchbox is focused?
Due to the nature of the app we’re trying to create, our users may or may not know what options are available for them to choose from when completing a field in a form. There are approx 60 default options (derived from the backend) that are available.
The searchbox input element works well if a user knows what they are looking for, however new users may not know what the default options are.
I have tried an input field and a repeating group that gets filtered, however because these elements aren’t connected, we lose the ability for the user to press the up & down keys on their keyboard to browse through the options. This wouldn’t matter if it was just this one field that needed this, but there are several within this form and not being able to tab and use the arrow keys would result in poor UX.
Obviously a normal dropdown for 60+ items would be unrealistic.
I would really appreciate any help/suggestions the friendly bubble community could offer.
Try this to see if it gets close to what you’re trying to do…
I set a static searchbox with only a few items in it. Then set the conditional for when the box is in focus default value is pear.
When you click on the input box it automatically populates with the search and you see the dropbox immediately. This only happens once though as the box is now pre-populated.
The user won’t necessary know what fruits are available to choose from, so rather than search for every type of fruit, the dropdown would be available once the searchbox is focused (with no typed text), so the user could scroll through and see the options and select the one they want.
However, if the user did know what they want, then they could simply type in the fruit name, press the down key on their keyboard and press enter.
If I populate the default value with ‘pear’, and the user doesn’t want pear, they would remove the pear text and the dropdown would disappear.
A good example would be the select2 dropdown (single select boxes example) https://select2.github.io/examples.html - the difference being is the search field wouldn’t be below the chosen result.
Gotcha - I didn’t understand but your github example is very good!
Even with doing a hack with many bubble elements I don’t think it would work since the search integration is very specific to linking the input box with the dropdown list. Using many elements would create disconnects and lags that would just be very very bad.
The way that would work is to build a new bubble element using the element builder.
I haven’t explored this yet - as it requires a little bit of javascript knowledge to do.
I haven’t managed to take a great look into this, but I quickly discovered that Bubble introduced a multi select dropdown from the select2 library as a plugin.
If you include a multi select dropdown element on a page, and use the HTML element to draw up a basic dropdown (just <select> and <option> tags), the basic dropdown gets turned into a select2 single select dropdown.
Basic dropdown without multi select dropdown element on page Basic dropdown with multi select dropdown element on page
Editor link - dropdown | Bubble Editor
I’m looking into a way to change the basic dropdown without needing to include a multi select. If I figure it out i’ll wrap it into a plugin to avoid any need for code. I’m having some difficulties with how Bubble includes this select2 library and how it includes Jquery however.
If anybody has taken a look at this before or has any pointers I would appreciate any help available.
@AdamJM I’m wondering if you ever found a solution to this. I’m trying to do exactly the same thing, without any knowledge of HTML or Javascript so I’ve been attempting to use standard dropdown (user can’t type), multiselect dropdown (not really right for single select) and the Search & AutoCorrect plugin with an RG (too slow for this application although it works well elsewhere). I could live with multiselect if it worked with ‘group by’ in its choices source because I have duplicates but unfortunately ‘group by’ despite working in the list of choices does not accept/select the chose option - it is shown momentarily then disappears. I’m hoping you found a solution since you last posted here.
Thanks for the help @Bubble_Nate. Unfortunately, I’ve tried that approach but it does not operate across all devices in the same way as the dropdown and it is slower to load and has a noticeable match lag because matching is not being done server side. It’s at my users request that I’m looking for an alternative. It’s almost but not quite what I need. The multi-input dropdown is perfect, it shows the available list instantly but it is not suitable UI when only a single input is required. I just keep hoping that someone has found a way to trigger the single dropdown in a similar fashion.
