Advanced Elements
AdminLTE deliberately doesn't bundle form widgets. The controls on this page use
the recommended third-party integrations —
Tom Select
and
Flatpickr. See the
Recommended Integrations
page for the full list with install snippets.
Tom Select
Start typing to filter the list; the × button clears the selection
(
clear_button).
Type to filter, press Enter to create a new tag, use the × button to
remove one.
Backed by 72 records behind a stubbed endpoint. Typing is debounced
(
loadThrottle), stale requests are cancelled with
AbortController, and scrolling to the bottom of the list pulls
the next page (virtual_scroll).
Flatpickr
Pick a start date, then an end date.
Coming from Select2?
Select2 is still maintained, but it is still a jQuery plugin — there is no jQuery-free build. Tom Select covers the same feature set in roughly 20 kB gzip, against Select2's ~50 kB once jQuery is counted. The API maps across almost one-to-one:
| Select2 | Tom Select |
|---|---|
$("#x").select2() |
new TomSelect("#x") |
tags: true |
create: true |
allowClear: true |
plugins: ["clear_button"] |
closeOnSelect: false |
closeAfterSelect: false |
maximumSelectionLength: 3 |
maxItems: 3 |
minimumInputLength: 2 |
shouldLoad: (q) => q.length >= 2 |
ajax: { url, delay: 250 } |
load(query, callback) + loadThrottle: 250
|
ajax.processResults |
valueField / labelField /
searchField
|
infinite scroll (pagination.more) |
plugins: ["virtual_scroll"] + setNextUrl()
|
templateResult / templateSelection |
render: { option, item } |
dropdownParent: $("#modal") |
Not needed — the dropdown renders inline |
$("#x").val("2").trigger("change") |
ts.setValue("2") |
$("#x").val() |
ts.getValue() |
.on("select2:select", fn) |
ts.on("item_add", fn) |
.on("change", fn) |
ts.on("change", fn) |
$("#x").select2("open") |
ts.open() |
$("#x").prop("disabled", true) |
ts.disable() |
$("#x").select2("destroy") |
ts.destroy() |
$("#x").empty().select2({ data }) |
ts.clearOptions(); ts.addOptions(data) |