jquery select2 v4 store new options to data - jquery-select2-4

Question

I am using Select2 and I can create dynamic options using tags: true but when I select a previous option, the newly added option has disappeared.
How can I save it to data so it's always visible?
I've added a jsfiddle but it's not pretty but does demonstrate my problem
var data = [{
id: 0,
text: '<div style="font-size: 1.2em; color:green">enhancement</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',
title: 'enchancement'
},
{
id: 1,
text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>',
title: 'bug'
}];
$("#other").select2({
tags: true,
data: data,
escapeMarkup: function(markup) {
return markup;
},
createTag: function(params) {
var obj = {
id: 'new_' + params.term,
text: '<div style="font-size: 1.2em; color:blue">' + params.term + '</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',
title: params.term
};
return obj;
},
insertTag: function (data, tag) {
// Insert the tag at the end of the results
data.push(tag);
}
});

Answer 1

You need to trigger the select2:select function
Try this
$("#other").select2({
tags: true,
data: data,
escapeMarkup: function(markup) {
return markup;
},
createTag: function(params) {
var obj = {
id: 'new_' + params.term,
text: '<div style="font-size: 1.2em; color:blue">' + params.term + '</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',
title: params.term,
isNew : true
};
return obj;
}
}).on('select2:select', function (e) {
if(e.params.data.isNew) {
data.push({id: e.params.data.id, text: '<div style="font-size: 1.2em; color:blue">' + e.params.data.text + '</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>', title: e.params.data.text});
}
});