39 lines
1.4 KiB
PHP
39 lines
1.4 KiB
PHP
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
|
|
<style>
|
|
.ts-wrapper .ts-control, .ts-wrapper .ts-control input {
|
|
background-color: #ffffff !important;
|
|
border: 1px solid #ced4da !important;
|
|
}
|
|
.ts-dropdown {
|
|
background-color: #ffffff !important;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
document.querySelectorAll('select').forEach((el) => {
|
|
if (el.tomselect) return;
|
|
|
|
new TomSelect(el, {
|
|
copyClassesToDropdown: false,
|
|
dropdownParent: 'body',
|
|
controlInput: '<input>',
|
|
sortField: [{
|
|
field: 'text',
|
|
direction: 'asc'
|
|
}],
|
|
// Natural sort plugin or custom sorter:
|
|
// We use a custom sort function to handle the "1 - ..." format
|
|
// This ensures "1" < "2" < "10"
|
|
sortField: {
|
|
field: 'text',
|
|
direction: 'asc',
|
|
func: function(a, b) {
|
|
return a.text.localeCompare(b.text, undefined, {numeric: true, sensitivity: 'base'});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|