Forum Academy Marketplace Showcase Pricing Features

Missing Plugin: search and select (dropdown)

I’m not sure what this means.

One plugin element that integrates fuzzy search, drop-down list behavior would be ideal.

I have build a reusable element that is close, but needs some refinement. The biggest drawback seems to be that it will need to be copied and modified for every unique situation. A well-designed plugin would be much more effective.

When my reusable element is ready, I’ll be happy to share it so you’ll have an idea of how the plugin should work.

1 Like

Hi @laurence

What it was meant, it was about the scenario you’ve come across by attempting to work it out as reusable element. Which does not work well.

As mentioned we’ll take notes and see what could be done. Thanks for feedback.

Regards,
Zeroqode Team.

@ZeroqodeSupport,

Have you looked into this or are you waiting for me to provide a working model of the search-select capability?

I can build a shareable project, but I don’t have one handy at the moment. The only version of the element is in my “real” app that is not really something I can share.

Let me know. The need is real. (I’m surprised other people aren’t clamoring for it. Perhaps I’m out of touch with the kinds of apps other people build. :thinking:)

Where I have mine working, it makes a world of difference in usability. There are many more places I can use it but mine has to be rebuild for every new data type that needs to be searched.

Hi @laurence

Thanks for request and notification

We received the feedback back in September, when you wrote about the idea and noted it. While we did not start working on it, we gathered some information about it and at the moment this isn’t a priority.
Thanks for understanding.

Regards,
Zeroqode Team.

1 Like

Thanks. I understand priorities very well.

With no expectations, I will, in the near future, provide a bit more detail about what I envision for this “missing plugin.”

+1 vote from me.

I also need this!

I’m going to try and cobble something together from OPs description, but I agree, a plugin would be much better and I’m surprised one doesn’t already exist.

1 Like

I need this every day. I cobbled together something that barely gets the job done. But this is clearly an example of why Bubble’s “no code” claim is more hype than reality.

@thecashbag, If you’re interested, I may be able to give you access to what I built. (I tend to fumble around when I try to extract bits and pieces from my only real app for sharing via a sample app.) Let me know, and I’d certainly be interested in what you come up with.

Hi @laurence, would love to share what I have, but I am new to Bubble so I’m not sure the best way to do that. So I decided to give you a step-by-step process of what I’ve done. Hope it helps you and anyone else who comes along.

My use case: I needed an autocomplete drop down that would change the input field text to whatever the user clicks on in the dropdown.

I’m using the ZQ Fuzzy Search & Autocomplete plugin for autocomplete functionality. Apparently the fuzz search (matching mispellings etc) is better than the original Search & Autocomplete plugin that you are using, but for our purposes below I think it works much the same.

Step by step process of how I got mine working…

MAKING THE SEARCH INPUT: These steps link the autocomplete plugin to the search input. For me, all of this stuff is living in the header because that’s where I needed it, but you can put it where ever you want.

  1. Place a regular input element in the header (name it something like Auto Search Input).
  2. Wrap the Auto Search Input element in a group (name the group something like Auto Search Input Group)
  3. Install the plugin ZQ Fuzzy Search & Autocomplete
  4. Add the ZQ Fuzzy Search & Autocomplete element to the page. It doesn’t matter where you add it, because it’s invisible, but it needs to be placed onto the page somewhere (name it something like Search&Autocorrect)
  5. Edit the Search&Autocorrect element you just placed on the page:
  • Configure it to search whatever you want by setting the data type, data source and fields to search. For this example, we’ll be searching Users. So Data Type is set to User, Data Source is set it Search for User, and Fields to Search 1 is set to First Name.
  • Check the box that says “Set text to match from an input box” (this part is important for linking it to the input).
  • Add an ID to the Input Box ID field (name it something like SearchInput)
  • You can mess the with search settings more here if you want, but the stuff above is required
  1. Edit the Auto Search Input element you added earlier. Scroll down to the bottom and set the ID Attribute to SearchInput.

Steps 7 and 8 are for for populating the input text with a value from the results when clicked. Skip them if you don’t need this functionality. We’re going to set a custom state on the input group and set the custom state to a value we get from the repeating group when clicked. Then the input element will use that data as the text it displays.

  1. Edit the Auto Search Input Group you created earlier.
  • In “Type of Content” set it to “Text”
  • In “Data Source” select the input group you are currently editing (i.e. Auto Search Input Group).
  • Then click “Create a New State” (Name the custom state something like Data From Result). Choose “text” as the type of the custom state.
  1. Edit the Auto Search Input element. Set the Placeholder and Initial Content fields to “Parent Group’s text”. Set the Content Format to text.

MAKING THE RESULTS: These steps display the results as a repeating group. All of this stuff can live at the top of the element tree. Even though it’s related to the input, it does not need to live in the same place as the input on the element tree.

  1. Add a Focus Group the page wherever you want the auto populated dropdown search results to display. Normally this is right under the input, but it can be wherever you want. Name it something like Auto Search Group Focus. Set the Reference Element to Auto Search Input to position it relative to that element.
  2. Inside the Auto Search Group Focus add a repeating group field. Name it something like Auto Search Repeating Group. Set the Type of Content to whatever type of content you want to show. Because we’re searching users in our example I’ll set Type of Content to User. Data Source is “Search&Autocorrect’s matches”. If you remember, Search&Autocorrect is the name of our hidden autocorrect plugin element on the page. So we’re displaying the matches from the Search&Autocorrect element inside the repeating group.
  3. Inside the first group of the Auto Search Repeating Group add another group. This group is a container that hold all the details of search result. Name it something like Auto Search Group Container. Set the layout and style however you need.
  4. Inside the Auto Search Group Container add whatever details you want to show in the search results. Can be images, text, whatever. For this example we’ll grab the users first name and display it as text. To do that add a Text element inside the Auto Search Group Container and set it to “Parent Groups’s Users First Name”. Showing their avatar could also be cool and works much the same.

MAKING THE WORKFLOWS: This makes the search results display when the input element is clicked, and puts data from the repeating group when clicked into the custom state so we can display it in the input.

  1. Open the Auto Search Input Group and click Start/Edit workflow. In the workflow configure it like so:
  • Workflow: When Auto Search Input Group is clicked, only when Auto Search Group Focus is visible.
  • Step 1: Animate an element. Element is Auto Search Group Focus. Set the Animation to Transition SlideUpOut. Set the duration to 200 ms.
  1. Create a copy of the workflow above, but change it to be like so:
  • Workflow: When Auto Search Input Group is clicked, only when Auto Search Group Focus isn’t visible.
  • Step 1: Animate an element. Element is Auto Search Group Focus. Set the Animation to Transition SlideDownIn. Set the duration to 200 ms.
  1. This last workflow step is only needed if you want the result display in the input when clicked. Open the Auto Search Group Container and click Start/Edit workflow. In the workflow configure it like so:
  • Workflow: When Auto Search Group Container is clicked
  • Step 1: Reset a group/popup. Element is Auto Search Group Container.
  • Step 2: Set state of an element. Element is Auto Search Group Container. Custom state is Data From Result. Value is “This Groups’s User’s First Name”.

Annnndddd that’s it. Phew!

I’m a hobby WordPress developer so I know more than a lay person about webdev, but it took me a FULL DAY working on nothing else to get that “simple” element up and running. It would be a nightmare for most people.

Bubble is great for API and workflows etc, but their editor reminds me of webdev in the 90’s. I love the direction their taking as a company and the whole no-code ethos, but I REALLY hope they focus on fixing their editor.

The real kicker is that I STILL haven’t got it to display perfectly (damn editor!). The input in my header is floating to the right when set with a fixed width.

If you appreciated the step-by-step instructions I would love if you could take a look at this post where I’m trying to solve that specific problem: [openBase] Template to Kickstart your App Development

3 Likes

Thanks, @thecashbag.

I’m heading out of town for the rest of the week but I may find some time to study this. One way or another I’ll get back to you in a week or so.

Glad I found this thread. Was hoping there’d be an easy solution to make a component like you first mentioned. Would rather not spend a whole day making one but appreciative to have @thecashbag’s walkthrough.

1 Like

Thanks for bringing my attention back to this. I haven’t had time in the past two months to do anything, but I have certainly stumbled on the need to fix the version I built more than a year ago.

I’m convinced that what is needed cannot really be built in Bubble. It needs to be done as a plugin. Since I don’t have that skillset, I’ll dig into @thecashbag’s solution to see if it solves the problems I have with my own Bubble implementation.

@laurence I whipped up a solution last night that is a big design compromise but hits the functionality I needed well enough.

My case:

I’m building a tool that (among other things) allows you to link user complaints with potential features / solutions.

When you log a user complaint, I wanted the component you described: a searchable dropdown, ideally with multi-select.

Instead, I put a button on the page that says: “Add relevant solution”
That triggers a popup with a repeating group of existing solutions.
I have a text input field wired up as a search bar on the repeating group.
Each row has an “Add” button.
Once a solution has been “Added”, its name displays on a group behind the popup, on the main form.

Janky but functional. Good enough for me for now, but I’m only building an internal tool!

1 Like

I’m about ready to go the route of a popup. It is hardly ideal since it will be used in other popups and it’s far to easy to inadvertently close the underlying popup before its work is done. Before I go with a dedicated popup for the search-select, I’ll try a group that contains the the search field and the repeating group to see if I can improve my current functioning.

Unless I am missing something fundamental to your request, I am not sure I understand. What you seem to be describing is the ‘search box’ element. What am I missing?

Ben,

Thanks for asking the question.
In simplest terms, the Search Box element doesn’t support inexact matches on search terms. When searching through a long list of items where the user isn’t sure of the exact spelling, a more forgiving search element will find a “close enough” item in the source list. A plugin like ZQ Fuzzy Search & Autocomplete is flexible in defining how close is close enough to show a candidate in the result list.

The Search & Autocomplete (aka “Search & Autocorrect”) plugins must be hand-wired to a repeating group where the matches are shown. And that’s more tedious than it should be when the behavior that’s wanted is very similar to Search Box.

Again, I thank you for asking the question and pointing out Search Box because its behavior is very similar to the kind of behavior I am looking for in a “fuzzy search” box.

I only asked because I use both fuzzy search plugins and searchbox elements. I was mainly asking what it was missing and you answered perfectly. Thank you :slight_smile:

1 Like

My issues with the Search Box were multiple:

  1. I wanted it to dropdown upon focus, to display all options, so the user can browse before searching.
  2. I wanted the menu options to be customizable: to combine dynamic labels fields (e.g. Title: description).
  3. I wanted the user to be able to multi-select from within the component, using checkboxes. (That would be a nice-to-have… if the menu didn’t have checkboxes, but simply collapsed itself upon making a selection, that would be acceptable behavior too).

Thankfully Bubble is atomic enough that I was able to easily enough create an alternative “version” of the component I had in mind, with a little creativity.

Could you explain how you created this? It is pretty much exactly what I’m looking for, I think.

@cliffwoodjames Sure. Though before I do, you should note that since my post, there’s been a popular plugin released which seems to do exactly what we were looking for, and more… bad timing for me, maybe better for you.

Selectize Dropdown: [RELEASED] Selectize dropdown

And I now see this from 2016: [New Feature] Multiselect dropdown & tags

Check those out and see if you’re still interested in my workaround.

2 Likes

This is an awesome step by step explanation! Thanks so much. I got everything to work except for the final step, no. 15. Step 1 is to reset a group/popup. Which option is that from the element actions? Can only see under Group ‘Display data’ or ‘Reset data’ . I picked ‘reset data’. When in Step 2, I clicked on Set state of element and then selected the element Auto Search Group Container there was no custom state to pick, only ‘create a new custom state’. Did you mean the Element Auto Search Input Group instead?