Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Multiselect support? #1

Closed
panos-kosmidis opened this Issue · 18 comments

4 participants

@panos-kosmidis

Hello! Great project! I found it in Chosen issues on discussion related to ajax loaded content :)

I wondering if you'll support multiselect (even if not ajaxed)

Thanks

@ivaynberg
Owner
@ivaynberg ivaynberg was assigned
@allochi

Hi,

Thanks for select2, I was so happy to find it, it saved my project :D

Cool thing about Multi-Select, but I woud like to hit it now before it's too late, since Multi-Select will be used mostly for tagging, is there going to be an option to add new tag/option?

What I'm thinking of is, if not found, it would say something like "couldn't find your entry, hit enter or shift enter to add it", and then select2 would either add an option dynamically to the select.

Thanks again!!!

@ivaynberg
Owner

@allochi its definitely something i want to support. just need to figure out how to do it properly...

for example if you already have "color-blue" tag as an available choice and you would like to add a new "color" tag then your idea above wont work because you wont have the "couldnt find your entry" scenario because "color" matches "color-blue"

so we need a slightly different approach...

@allochi

@ivaynberg correct, you are right, but if we for example choose the way that OS X tags are entered, if I type "color" in your example, although the drop down is going to select the "color-blue" I can type a comma as a separator, then it should understand that it's the end of my entry, which doesn't match any other options in the list, same thing with say shift-enter, the idea is to have a terminator/separator different than simple enter.

@panos-kosmidis

Personally I don't believe that this is something that chosen or select2 should be concerned, chosen is a better representation of select elements and select2 extends chosen to add the ability to ajax loading content for select boxes, so far so good, the fact that select multiple appears to be like tags is not that it should have tags functionality, I personally believe that each tool should have one focus and not do everything, regarding tags there are already tools that do the job you want and they do it good, personally I like tagit, no need to re-invent the wheel.

Just my personal opinion :)

@allochi

@panosru although I do agree with you to some degree in general, I'm in the positions where I need select2 to be multiple select that acts like tag, one js file that does both for me is perfect, and select2 in my opinion is the best out there for what it's doing, why not include tagging in it.

@ivaynberg I hope this won't push you back, I think a lot would agree that the tagging functionality is a feature that is wished from select2 to make the perfect complete in it's field.

By the way, I finished switching all my forms to select2, everybody LOVES it here!!! and we wish to turn our tagging field to it ;)

@panos-kosmidis

@ivaynberg yeah I hope my post won't push you back :)

@allochi yes indeed having one file doing many things is not always bad I can agree on that-one, I just think having one file which do things that are not necessary is not good, personally I believe that adding new tag mechanism is not necessary but even so if select2 will support it I have some places in my mind in my panels where I could make good use of it ! :)

@allochi

@panosru let's agree on tagging, and I'll drop my next request of getting these tags filled in by telepathy :D

@panos-kosmidis

hahahaha

yeah I'm not arguing, some people will find it useful I'm sure about that! :)

@ivaynberg
Owner

actually tagging is already possible. it simply involves creating a query function that includes user's choice as the first match.

here is a working example: http://jsfiddle.net/ivaynberg/seck4/9/

i'll paste the code here as well for posterity

var tags=['green', 'red', 'blue', 'orange', 'white', 'black'];

$("#tags").select2({
    multiple:true,
    query:function(query) {
        var data={results:[]}, 
            results=data.results, 
            t=query.term;

        if (t!==""&&tags.indexOf(t)<0) {
            results.push({id:t, text:t});
        }

        $(tags)
         .filter(function() { return this.indexOf(t)>=0; })
         .each(function() { results.push({id:this, text:this}); });

        query.callback(data);
    }
});​

one thing to note is that for this to work select2 has to be attached to a hidden input rather then a select tag because it will not yet add missing option elements

@panos-kosmidis

@ivaynberg dude, I have to say that you rocked the shit out of chosen ! :P best extension of beloved plugin I ever seen! Thanks for that! I just replaced chosen with select2, you done a great job.

Regarding multiselect when I select something is it possible to remove it from the selection list since I already selected it (like chosen do? )

Thanks

@ivaynberg
Owner

@panosru by default things already selected are rendered as disabled. you can hide them completely with css like this:

.select2-results .select2-disabled { display:none; }

give that a go.

@panos-kosmidis

@ivaynberg yes this, works fine I just though that having in options something like hideSelected : true would be better instead of hacking css file :)

@ivaynberg
Owner

@panosru put that into a different issue and i will work on it when i have time. a pull request will also be welcome :)

@justindujardin

@panosru @ivaynberg I think that adding a hideSelected option is a bit more of a hack than modifying the CSS styles. CSS is all about customizing the display of things, and this is a perfect use case for it.

That being said, I wonder if a display:none; style is better for disabled items? Personally I like it more, because the disabled items in the list are already being rendered in the input control itself, so the information seems a bit redundant. At the end of the day it's really a stylistic choice, but I don't think it's worthy of an option.

@panos-kosmidis

@justindujardin I agree with you

@ivaynberg
Owner

my worry with display:none as default is that it makes ajax driven select boxes a little funky because the user will get a variable number of results back based on whats already selected. sometimes you will get 10, but other times maybe 8 if two of the results are already selected.

this can of course be fixed by always pulling max+numberOfSelective from the server and returning the first max viable results to keep the size consistent...

@ivaynberg
Owner

selected choices are now hidden by default in results. also, tagging is now more fully supported. time to close this one.

@ivaynberg ivaynberg closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.