Select2 dropdown allow new values by user when user types

Question

The select2 component can be configured to accept new values, as ask in Select2 dropdown but allow new values by user?

And you can see it at: http://jsfiddle.net/pHSdP/646/ the code is as below:

$("#tags").select2({
    createSearchChoice: function (term, data) {
        if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {
                id: term,
                text: term
            };
        }
    },
    multiple: false,
    data: [{
        id: 0,
        text: 'story'
    }, {
        id: 1,
        text: 'bug'
    }, {
        id: 2,
        text: 'task'
    }]
});

The problem is that the new value is only added to the list if you enter new value and press enter, or press tab.

Is it possible to set the select2 component to accept this new value when use types and leave the select2. (Just as normal html input tag which keeps the value which you are typing when you leave it by clicking some where on the screen)

I found that the select2 has select2-blur event but I don't find a way to get this new value and add it to list?!

It worked! Please see it at: jsfiddle.net/pHSdP/647 Send the answer so I can mark it as correct! — Alireza Fattahi
– Alireza Fattahi, Commented Sep 2, 2014 at 5:46

Jason · Accepted Answer · 2014-09-02 05:54:09Z

11

Adding attribute selectOnBlur: true, seems to work for me.

Edit: glad it worked for you as well!

answered Sep 2, 2014 at 5:54

Jason

7691 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Char · Accepted Answer · 2016-10-11 08:45:48Z

5

I am using Select2 4.0.3 and had to add two options:

tags: true,
selectOnBlur: true,

This worked for me

answered Oct 11, 2016 at 8:45

Char

1911 silver badge7 bronze badges

1 Comment

Darren Parker Over a year ago

For v4, it looks like selectOnBlur was changed to selectOnClose

Sergii Shcherbak · Accepted Answer · 2017-12-04 12:51:21Z

0

And to be able to submit multiple new choices together with the existing ones:

select2({tags: true, selectOnBlur: true, multiple: true})

answered Dec 4, 2017 at 12:51

Sergii Shcherbak

9971 gold badge11 silver badges13 bronze badges

Collectives™ on Stack Overflow

Select2 dropdown allow new values by user when user types

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related