Basic Select
Standard initialization with placeholder and allowClear.
$el.select2({ placeholder: "Select a country...", allowClear: true });
Data Setter
Set value via select2("data", obj) - removed in 4.x, handled by wrapper.
$el.select2("data", { id: "jp", text: "Japan" });
Container Access
Access internal container via select2("container") - removed in 4.x.
var $c = $el.select2("container");
$c.css("border", "2px solid #f0883e");
Multiple Select with maximumSelectionSize
Uses 3.3.x option name "maximumSelectionSize" (renamed to maximumSelectionLength in 4.x).
$el.select2({ maximumSelectionSize: 3, placeholder: "Pick up to 3..." });
Custom Formatting (formatResult / formatSelection)
Uses 3.3.x formatResult and formatSelection (renamed to templateResult/templateSelection in 4.x).
$el.select2({
formatResult: function(item) { return "<b>" + item.text + "</b>"; },
formatSelection: function(item) { return "[" + item.text + "]"; }
});
Custom Matcher (old signature)
Uses 3.3.x matcher(term, text, option) signature. Type "an" to match Germany and Japan.
$el.select2({ matcher: function(term, text, opt) {
return text.toLowerCase().indexOf(term.toLowerCase()) >= 0;
}});
Language Functions (formatNoMatches, formatSearching)
Uses 3.3.x format functions (moved to language object in 4.x). Type something that does not match.
$el.select2({
formatNoMatches: function() { return "No results found."; },
formatSearching: function() { return "Searching..."; }
});
AJAX (3.3.x config shape)
Uses quietMillis, data(term, page), and results(data, page). Searches GitHub repos.
$el.select2({ ajax: {
url: "...", quietMillis: 400,
data: function(term, page) { return { q: term }; },
results: function(data, page) { return { results: [...], more: false }; }
}});
Event Bridge
Listens for 3.3.x-style events (select2-open, select2-close, select2-selecting, etc.).
$el.on("select2-open", function() { ... });
$el.on("select2-selecting", function(e) { log(e.choice); });