JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ivaynberg.github.io/select2/select2-3.5.1/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.5.1/select2.css">
<input type='hidden' value="192" data-init-text='Bla bla' name='input' id='test' style="width:300px;" />
JavaScript
$(document).ready(function () {
var s2list = $('#test').select2({
minimumInputLength: -1,
placeholder: 'Search',
data: [{
id: 1,
text: "First"
}, {
id: 2,
text: "Second"
}],
formatResult: function (item) {
return item.text + "<button class='btn btn-xs btn-default pull-right select2-result-button' data-id='" + item.id + "'>×</button>";
}
}).data("select2");
s2list.onSelect = (function (fn) {
return function (data, options) {
var target;
if (options != null) {
target = $(options.target);
}
if (target && target.hasClass('select2-result-button')) {
alert("clicked: " + $(target).data("id"));
} else {
return fn.apply(this, arguments);
}
}
})(s2list.onSelect);
});