New Search Dropdown

Hi everyone,

I wanted to share a plugin I recently built: Searchable Dropdown.

The idea came from something that felt surprisingly basic. Searchable dropdowns are such a common UI element, and this kind of functionality already exists natively in other no-code tools like FlutterFlow. But in Bubble, I felt that the available options were still lacking.

What bothered me most was that Bubble’s searchable dropdown behavior did not really cover my use case well. In some situations, it would not work properly with Option Sets, and results would only show up after the user started typing, which is not always the experience you want.

So I went to the marketplace expecting to find a solid plugin for this. I tested several of them, but honestly, most felt either incomplete, limited, or just not very good in practice.

That is when I decided to build my own.

I used my JavaScript knowledge and some AI assistance to put together a version that feels much closer to what I think this element should be: simple, useful, customizable, and practical for real Bubble apps.

What the plugin includes

  • searchable dropdown behavior
  • dynamic choices source
  • support for default value
  • customizable placeholder and search placeholder
  • customizable empty state message
  • customizable colors for hover, selected row, trigger, dropdown, borders, and search input
  • exposed selected_item state
  • value_changed event for workflows

Why I made it

Mostly because I felt this should already exist in a better form inside the Bubble ecosystem. It is a simple feature, but one that makes a big difference in forms, filters, dashboards, and internal tools.

If anyone wants to try it, I would really appreciate honest feedback. I’m happy to improve it further based on real usage and suggestions from the community.

Plugin link: search_dropdown Plugin | Bubble

Thanks!

Hi Vinicius,

It’s a great looking plugin and seems to work well, however when I used it I noticed a significant issue.

I have a dropdown in a floating group. Within this floating group, I have a tab that shows the dropdown when clicked (so it’s not visible on page load).

Despite me discarding the changes i make within the popup, it holds on to the last selected value and does not reinstate the actual initial value. The correct initial value does come back, but only when the page is refreshed.

Is this something you could look into?

Thanks for all your work and contributions!