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?!

Mitch

Adding attribute selectOnBlur: true, seems to work for me – Haemoid

It worked! Please see it at: jsfiddle.net/pHSdP/647 Send the answer so I can mark it as correct! – Mitch

Answer 1

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

Edit: glad it worked for you as well!

Haemoid

Answer 2

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

tags: true,
selectOnBlur: true,

This worked for me

Cortisol

For v4, it looks like selectOnBlur was changed to selectOnClose – Tews

Answer 3

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

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

Hydroxylamine