Alireza Fattahi Alireza Fattahi - 1 month ago 11
Javascript Question

Select2 dropdown allow new values by user when user types

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

Answer

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

Edit: glad it worked for you as well!