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

Jason Jason · Accepted Answer · 2014-09-02T05:54:09

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

Edit: glad it worked for you as well!

Select2 dropdown allow new values by user when user types

3 Answers