Select 2 example
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select multiple="true">
<option value="1" selected>Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="-" disabled>No additional documents found.</option>
</select>
CSS
select {
width: 100%;
}
JavaScript
var itemsUnselected = 0;
resetItemsUnselected();
function resetItemsUnselected() {
itemsUnselected = $('select')[0].options.length - 1;
console.log('Reset itemsUnselected = %d', itemsUnselected);
}
function filterResult(opt) {
console.log("filterResults(): %o", opt);
if (opt.id === '-') {
console.log("==> got noMatches item; itemsUnselected = %d", itemsUnselected);
var retVal = itemsUnselected !== 0 ? null : opt.text;
resetItemsUnselected();
return retVal;
} else if (opt.selected) {
itemsUnselected--;
return null;
} else {
return opt.text;
}
}
function formatLink(opt) {
if (!opt.id) {
return opt.text;
}
var $opt = $(
'<span>' + opt.text + '(' + opt.element.value + ')</span> '
);
var $req = $.ajax({
url: '/echo/js/?js=' + opt.id
});
$req.done(function(data) {
var a = $(document.createElement("a"));
$(a).click(function(e) {
e.preventDefault();
e.stopPropagation();
window.open(a.data('url'));
});
a.text("view");
a.attr({
'href': "#",
"data-url": "http://google.com"
});
return $opt.append(" - ").append(a);
});
return $opt;
}
$("select").select2({
templateSelection: formatLink,
templateResult: filterResult,
minimumResultsForSearch: 1,
closeOnSelect: true,
noMatches: function(term) {
return "No additional documents found";
}
});
$("select").on('select2:selecting', function(e) {
console.log(e);
}).on('select2:close', function(e) {
resetItemsUnselected();
});