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() {
$('#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>";
}
});
$(document).on("click", ".select2-result-button", function(e) {
alert("clicked: " + $(this).data("id"));
e.preventDefault();
e.stopPropagation();
return false;
});
});