Forum Academy Marketplace Showcase Pricing Features

Add a dropdown element like the one used on Discourse

I would love an element like this that shows the items, but allows me to filter by typing.

3 Likes

I recommend the select2 library. “Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.”

https://select2.github.io/examples.html

But, I’m not sure how easy/hard that would be.

1 Like

Those look awesome @vega.andrew!

You can replicate that in Bubble

Take a look at a quick example i made. Add style and animation as you like.

https://publictestapp.bubbleapps.io/version-test/discoursedropdown

Enjoy!

7 Likes

Looks good!
But it doesn’t seem like the search input field updates the repeating group?
Nothing happens when you start typing…

Edit: I see now that the input field wasn’t set as a search constraint.

A problem with this is that you have to type the exact word in the input to make it show in the repeating group.
If you type “Bug” it shows nothing, but if you type “Bugs” it appears.
Also the search is annoyingly slow :slight_smile:

Edit: If you use Filter instead of search constraint it updates the repeating group real time, and shows Bugs when you start typing “B”

Great work @AliFarahat, will be using this! :slight_smile:

3 Likes

The only other annoying thing I noticed is that it’s case sensitive. Typing “b” instead of “B” shows nothing. Otherwise, great work @AliFarahat! I’ll try to implement this tonight on FeatureSeed

I know! You can sort of get around it by setting the constraint to :lowercase, but then again it doesnt show anything if you type uppercase…
Any other solutions for this?

Your right case sensitive fields can be annoying sometimes. (And helpful in other times) what i do at least in the back end is to always follow a set of rules.

  1. All names start with capital
  2. all IDs or unique values or identifiers are in Caps
  3. all multi line as is
  4. everything trimmed
  5. All short forms like UN for united Nations in Caps

I make the changes at create and modify events. So in your example i will store the value bugs as “Bugs”. Then i will capture the input text supplied and make the changes as per my rule list in the filtered or constraints.

Cheers

Found a solution to the case sensitivity-issue.
If your values are starting with a capital letter, In the filter constraint, add an advanced constraint like this:
Advanced: This contains Input A (or whatever)s value OR This contains Input A:lowercase value

5 Likes

Are you using this in the original Do a search for, or in the filter?

That’s in the filter :slight_smile:

1 Like

Cool solution