Multi Select

[lstrzelecki]

It would be nice to have something which is called 'select2'. Please check this out: http://t0m.github.io/select2-bootstrap-css/3.4.1.html

Especially: Select2 multi select

[jlukic]

I agree, although it is one of the more difficult components to create at parity with other open source options like Select2.

For now if you want to stick to SUI only, you can use ui search for autocompleted search/ local lookup, or ui selection dropdown for a standard dropdown selection menu.

[lstrzelecki]

Yeah, I noticed that it has a lot of options and modes. For now I can replace that functionality.

[vinz243]

There is Selectize.js which is really goo too. (and more beautiful as far as In am concerned)

[nickretallack]

Bootstrap Multiselect is pretty good. It's rather dependent on bootstrap stuff though. If we had something similar in Semantic UI that'd be nice.

The beta version of Dropdown is pretty darn close. The search feature is beautiful. However, there's no multi-select feature here.

I tried adding a checkbox to one of the list items, but when I selected it, it cloned the checkbox into the selected item spot :P. I guess it needs more logic than that.

Btw, if you do end up looking at bootstrap-multiselect, there's one area that it'd be nice to differ. It seems to maintain a regular <select> in addition to the <input type="checkbox"> fields. This causes it to post the same information twice though. This problem can be avoided by deleting the name from either the checkboxes or the select field, depending on which one you want to be the real form element.

[culfin]

We already had a discussion about this topic, please see #1115

I personally would absolutely love to see this feature as well for a 1.0 release because the Drupal integration of Semantic UI (which is being worked on) cannot be completed without Dropdown Multi Select.

Is there any way to make this happen? Maybe by contributing some code or sponsoring the development?

[keesee]

Hi all. I recently joined the chinese translation team. This caught my attention because we have done a bit of work on drupal admin integration. Is there a repo for that project? Perhaps combining our efforts would be better.

Sorry if I hijacked the thread.

Jimmy R. Keesee 柯杰明 via mobile

Culfin notifications@github.com wrote:

We already had a discussion about this topic, please see #1115

I personally would absolutely love to see this feature as well for a 1.0 release because the Drupal integration of Semantic UI (which is being worked on) cannot be completed without Dropdown Multi Select.

Is there any way to make this happen? Maybe by contributing some code or sponsoring the development?

—
Reply to this email directly or view it on GitHub.

{"@context":"http://schema.org","@type":"EmailMessage","description":"View this Issue on GitHub","action":{"@type":"ViewAction","url":"https://github.com/Semantic-Org/Semantic-UI/issues/847#issuecomment-57801604","name":"View Issue"}}

[culfin]

Yes, you can find the Drupal integration at https://www.drupal.org/sandbox/culfin/2152101
The plan is to release it when Semantic UI 1.0 is released.

I absolutely agree with combining our efforts, you're welcome to give it a try. :-)
But for further discussing we should open a new thread.

[jlukic]

I want to make a multi-select, my issue is just timeline.

I've committed to releasing near "the end of October" which now is only a few weeks away. I haven't finished a theming or learnsemantic website yet, which i promised with launch, and still have more work to do on other parts of the library.

It's a difficult balance now with so many components in the project, each with their own needs. Maybe its time to start that kickstarter, heh.

[nickretallack]

Multiselect is the main blocker stopping me from using semantic ui right now. I wonder how easily bootstrap-multiselect's javascript could be hacked to use Semantic-UI's CSS? What if it's as simple as changing the templates?

[culfin]

@jlukic, if you plan to do a kickstarter, I'd be happy to be part of it.
In my opinion, Multiselect should be included as soon as possible.

[nickretallack]

Closed? What's the resolution here? Did this feature get implemented or dropped or what?

[jlukic]

Sorry, was closing duplicates, and accidentally closed.

[geemang2000]

I'm curious if this is still alive? I'm all in on SUI. I need a multiselect for my UI.

I like http://brianreavis.github.io/selectize.js/ . I might use this for now. The challenge with non-SUI components is the normal styles and validation / error styling do not matchup well. So you'll need to build some thunk CSS / JQuery logic.

[jlukic]

I would recommend using Selectize for now. It will still be a while.

[geemang2000]

Thanks @jlukic If this helps anyone I'm using https://github.com/machineboy2045/angular-selectize

[RyanThompson]

Hi @jlukic - what is your timeline guesstimate here? I am using this UI on a very large open source project and love it. But the multi-select feature is really killing me. If your delivery guesstimate is waaaay off.. would you consider sharing plans / outlines / requirements, if you have any, with me? I would be happy to contribute the feature.

The project is https://github.com/pyrocms/pyrocms which is powered with https://github.com/anomalylabs/streams-platform

The plugin, preferably, would power one of our core field types which was powered by select2 but.. kinda like to keep it all in the family when possible: https://github.com/anomalylabs/multiple-field_type

[jlukic]

I'm kind of in crunch mode right now, im personally out of money and trying to figure out a way to make the project sustainable. I really do want to address multi-select but fighting the clock.

I'll see if i can rummage out a day to add this month..

[RyanThompson]

I'd start by making your donate button more pronounced. It was a little hard for me to find ;-)

Let me know if I can help. PS I didn't see anything other than the donations as far as monetization? None of my business but just curious!

Cheers

[geemang2000]

This is an incredible body of work. We should help out by getting more publicity for this project. I'm donating today.

[jlukic]

Thanks for donating @RyanThompson, this is actually the largest donation i've ever received (!!!) 🙇 : .

I'm working on adding multiselect as we speak. I think it will work nicely with ui label

I haven't really had too much time to step away from code to think about money. It's a bad habit which I've been trying to step out of, but there always seem to be coding demands which make it difficult to dedicate time exclusively to more business-minded things.

[RyanThompson]

You're very welcome - A drop in the worthy pool for a product like this I am sure. But seriously put your donate button in the header lol!

Sounds great regarding the multi-select! Very excited. Ya, I think that's another developer stereotype too for developers who are also running a business lol. I know I've been there in the past. Do you have any ideas on how you could monetize better that you haven't acted on perhaps?

Regarding publicity, theming has always been a little week for PyroCMS. Mostly because it has been historically built by developers and not designers. But that has changed with our 3.0 release and I plan on making the packaged public theme with Semantic UI as well (PS do you have any templates?). The admin theme is already Semantic UI. I think designers will love using the default public theme right out of the box which should be nice exposure and enticement. Our docs will predominately condone Semantic UI too.

I think having a rockin framework for the public / admin themes and not some custom crap whoever made a long time ago will really encourage designers to check out our theming approach and nudge them your way.

Cheers

[RyanThompson]

And yes, ui label sounds like an amazing plan. Really you can combine the search select and labels and viola. Im sure it's not that easy ^_^

[jlukic]

Thanks again to both of you, and I'll let you know on progress. Beginning asap.

I'm going to lump multiselect in with the 2.0 release which I'm hoping to use to drive up attention again in the project.

[marcotas]

Thanks a lot man! Thats really a awesome feature!!! I cant whait for this multiselect element!! Just perfect! Dont stop!

Em qua, 8 de abr de 2015 às 14:28, David Kuo notifications@github.com
escreveu:

So cool!

—
Reply to this email directly or view it on GitHub
#847 (comment)
.

[jlukic]

Will be releasing along with beta docs this week for people who want to adopt early. Keep in mind documentation for 2.0 is still hugely a work in progress.

[kamaroly]

@jlukic how do you computer those animated form inputs?

[jlukic]

Examples of multiselect are now up in beta docs. They are about 90% of the way, but still need a few polish adjustments.
http://beta.semantic-ui.com/modules/dropdown.html#multiple-selection

@kamaroly All animations use semantic's transition module.
http://semantic-ui.com/modules/transition.html

[mylanconnolly]

I am extremely excited about this. The components look awesome!

[anush0247]

I got a problem in a situation

I am having a skills form with some c,java, pythons skills list. first user selected c, java.
later he wants to update the list to c,python when he is trying that i can't remove the java from the list
selected=selected is not removing for that java option in select list

Inintially multi select comes with selected=selected for the options that are previosly selected in html code but i can't figure it out when we apply .dropdown() to that select its looks like empty selection

how do i fix this.

I got one solution is about to select all of the list and removing the unwanted but i want a list containg previously selected items as (label1 x) (label2 x) later i can remove them right

Thank you
apart from this all are working fine

[jlukic]

@anush0247 please open a new thread if you want to post a bug, and include a test case. This is not the place to post on that.

There's a link in readme for JSfiddle with next branch.

[anush0247]

ok i will report it in a new branch. I though its an imporvement thats why i have posted it here

[mindbits]

fantastic work!

will there also be a version that supports remote calls for large datasets?

[jlukic]

We try to stay ambivalent about backend since most frameworks we work with are opinionated on the matter. That being said, any normal way which you grab data works, just initialize dropdown after :)

If you're looking for querying against a remote data set the search component was defined with that in mind.

[avalanche1]

Hey mate, why don't you monetize like those guys - at least for starters:
http://robomongo.org/backlog

[mindbits]

That is actually an awesome idea.

The search component is not useful for my case and I would donate a nice amount to have some core select2 functionality in the multiselect component including but not limited to remote calls.

[jlukic]

I've added more examples of multiselect in beta documentation. I have 1-2 hours more polish then closing up on dev.
http://beta.semantic-ui.com/modules/dropdown.html#/examples

Tokenizing is complete with new setting userAdditions: true, works for both single and multiple dropdowns. There's a lot of fun edge cases, when supporting so many different settings all as mutually inclusive options, so its taken me a few days to get the code in a place where I can say it is stable.

Read release notes for full list of new features but here's some

• Support for error messages and custom messages like 'not found', 'max selections', etc
• Added tokenizing support on comma,
• Page up and page down keys now scroll menu selection by a page
• All search selection menus now function identically if search is inside the menu, including errors etc
• Added new scrolling menu option for a scrolling menu inside a menu
• Normal selection dropdowns (not search) now will select the first element with the key you press. So pressing "V" on states will highlight Virginia
• Multiselect tags support group selection like ctrl + click or shift + click
• Group selection also works with arrow keys, i.e. select label hold shift and press left, select more labels
• Multiselect can work with either a hidden input and delimited values, or using the original <select>
• Fun little UX edge cases like, clicking right on last label focuses input, clicking on menu selection with mouse keeps menu open, but keyboard enter closes menu and clears search..

Check docs and release notes for all the new features. Closing in on 200 bug fixes and enhancements for 2.0.

[avalanche1]

well, what can I say?
Outstanding job!

[parhelium]

@jlukic you are doing fantastic job !
Thanks, for your hard work !

I really need to have multiselect in semantic-ui, becuase form validation doesn't work nice with selectize...
How can I boost development of this feature, donation ?
What is your bitcoin address ?

[jlukic]

@parhelium This will be part of june 1st 2.0 release. I only have a couple tweaks left to make.

Thanks for offering to pitch in. You can find the donation link in the footer of semantic-ui.com

[jlukic]

All set for release next week

[jlukic]

Made this gif of keyboard shortcuts with multiselect

[avalanche1]

It would be nice to have a reference of these shortcuts in the docs, I guess

[rui-ktei]

Just wondering about this multiselect: can we have something like this that when there is no result matched, the user can still press enter and add that as a new tag?

[jlukic]

@rui-infotrack Thats already available as allowAdditions setting

[geemang2000]

In the Dropdown examples Mulit-select works as advertised. http://semantic-ui.com/modules/dropdown.html#/examples

However, with a single select the Enter key does not add the element. It'd be great if the single had the same behavior .

[jlukic]

It does, check docs.

[rui-ktei]

@jlukic sorry, my bad... should've found it myself. Thank you : )

[adrianmteo]

Isn't there a possibility to remove the dropdown and have a simple tags input just like in this example: http://formvalidation.io/examples/bootstrap-tagsinput/?

[venkatasandeepd]

Is it possible to have multiple check boxes instead of options, a select all and unselect all options along?

On clicking the check box updates the name in select box with name or this many items selected !

[avalanche1]

@dhvsandeep this is a tottaly new enchancement for dropdown. Open a separate issue and I'll tag it as enhancement proposal