Multi select dropdown

#1

Hello,

Anybody knows how to create multi select dropdown like this. see this attachment.

#2

At its core it’s two repeaters - one with the list of available options and one with the selection options. Onclick of the option you remove the item from options and add it to the selection options. On click of the x in the selected options you remove from the selected options repeater and add it back to the options. You’ll want to put your options repeater in a scroll-able dynamic panel.

It gets a little tricky if your options are different widths as you’ll need to dynamically set the width of your selected options. The only way to do this that I know of is to use some javascript and a bunch of complicated interactions. I’ve done it but would recommend avoiding it unless absolutely necessary.

To get the blue border around everything you’ll want to put all of it over a widget and use the selected state or something similar to apply a interaction state withe blue highlight/glow.

Here’s a super quick dirty sample. I have done much prettier versions - but those have a ton of IP in them and aren’t shareable. I think this should get you started, though. There may be some other versions on the forum if you take a look around.

multiselect.rp (58.1 KB)

#3

Thanks you very much.Wow great. It’s working fine but only one small thing. when I am doing Onfocus out, my expectation should hide dropdown list but it’s not happening. I tried it but it’s hiding entire panel.

#4

Yeah, focus is tricky in this case because any interaction will cause it to lose focus. Forgot about this - but what I’ve done in the past is create a dynamic panel that is full screen width (needs to move when the page is scrolled as well). When you show the options, you also show the dynamic panel but keep the widgets at the front. On click of the dynamic panel in the background, it hides everything and resets the field back to it’s normal size. It’s a little clunky in that you have to click off before you can click on something else, but it’s close enough…

The attached revised example shows one way to do this…

multiselect.rp (63.2 KB)

#5

Hi UXProtoTyper,

Thank you very much. This what i am looking for it. I made few changes on this but autocomplete and onfocus out is bit challenge.It would be good if you suggest some solution. Here is my RP file.Multiselect.rp (74.0 KB)

#6

hi @Love-axure,

You could use “treat as lightbox” option when showing the dynamic panel:

It’s a nice trick to deal with OnLostFocus issues:
multiselect - treat it as lightbox.rp (62.3 KB)

Best,

#7

PierreJ’s solution will work, but if you want the background to encompass all of the widgets, you’ll need to bring the selected options repeater to the front on show. Lots of ways to skin a cat here!

Is there a reason you’re starting with the selected repeater above the field and moving it down?

#8

Thanks Pierre J. Let me try it out

#9

Yes. If selected item hidden in same input field, then it occupied same space and I’m not able to click from left side of input box. That’s the reason, fixed on top and moved it down when it’s selected.

#10

Thanks PiereJ, works fine but it’s not fulfill my requirements. Expecting something else.Let me try for some other solution. Keep working on it. Please update if you guys have any solution.

#11

Something like that for autocomplete and On LostFocus?
Multiselect (1).rp (81.9 KB)

I used you prototype:[quote=“Love-axure, post:5, topic:54106”]
Multiselect.rp (74.0 KB)
[/quote]
as a base.

#12

Hi PierreJ,

Thanks a lot. Finally got it from this wonderful support. There is minor fine tune is required. I hope it can be possible.I will try it. If you find any short cut please update.

  1. How do we increase selected item width dynamically?
  2. How do increase search bar height which is based selection. If selection is more, then it should increase the height instead of width.

Multiselect_updated.rp (81.7 KB)

#13

1=> Look at this thread to set size of your chips/tag dynamically:


it should be of some help

2=> I think a Set Size with push/pull widgets below should work great
You will have to trigger it if the tag you will add is too wide and will go outside of the input

#14

Hi there, do you able to make changes on the multi select drop down. You changes are good but there are many issues.
Did any update on this version?
I do not want the options to hide once clicked and text in the field should occupy the space dynamically.

Kindly help.