select2 mulit tags duplicate
HTML
<link rel="stylesheet" href="//cdn.bootcss.com/select2/4.0.0/css/select2.min.css">
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/select2/4.0.0/js/select2.min.js"></script>
<select class="js-states js-example-events form-control" multiple="multiple">
<option>red</option>
<option>green</option>
</select>
<div class="s2-event-log">
<ul class="js-event-log"></ul>
</div>
JavaScript
var $eventLog = $(".js-event-log");
var $eventSelect = $(".js-example-events");
$.fn.select2.defaults.set("width", "50%");
$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
$eventSelect.on("change", function (e) { log("change"); });
$eventSelect.on("select2:select", function (e) {
log("select2:select", e);
$eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});
$eventSelect.on("select2:unselect", function (e) {
log("select2:unselect", e);
e.params.data.element.remove();
});
function log (name, evt) {
if (!evt) {
var args = "{}";
} else {
var args = JSON.stringify(evt.params, function (key, value) {
if (value && value.nodeName) return "[DOM node]";
if (value instanceof $.Event) return "[$.Event]";
return value;
});
}
var $e = $("<li>" + name + " -> " + args + "</li>");
$eventLog.append($e);
$e.animate({ opacity: 1 }, 50000, 'linear', function () {
$e.animate({ opacity: 0 }, 2000, 'linear', function () {
$e.remove();
});
});
}
function formatResultData (data) {
if (!data.id) return data.text;
if (data.element.selected) return
return data.text;
};
/* $eventSelect.select2({
templateResult: formatResultData,
tags: true,
tokenSeparators: [','],
placeholder: "Add your tags here",
the next 2 lines make sure the user can click away after typing and not lose the new tag
selectOnClose: true,
closeOnSelect: false,
allowClear: false
} */
);