Advanced Select
Dokumentasi Tom-select.jsHow to use
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF SELECT
// =======================================================
Nue.components.NueSelect.init('.js-select')
});
</script>
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person...",
"hideSearch": true
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
Custom placeholder
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "<div><i class=\"bi-person me-2\"></i> Select member</div>",
"hideSearch": true,
"width": "20rem"
}'>
<option value=""></option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
Dropdown width
<div class="input-group">
<input type="text" class="form-control" name="fullName" placeholder="Search name or emails" aria-label="Search name or emails" aria-describedby="fullName">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"dropdownWidth": "300px",
"dropdownLeft": true
}'>
<option value="4" selected>Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
<a class="btn btn-primary" href="javascript:;">Invite</a>
</div>
With append and prepend
<!-- Prepend -->
<div class="input-group mb-3">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"dropdownWidth": "300px"
}'>
<option value="4" selected>Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
<input type="text" class="form-control" name="fullName" placeholder="Search name or emails" aria-label="Search name or emails" aria-describedby="fullName">
<a class="btn btn-primary" href="javascript:;">Search</a>
</div><div>
<!-- End Prepend -->
<!-- Append -->
<div class="input-group">
<input type="text" class="form-control" name="fullName" placeholder="Search name or emails" aria-label="Search name or emails" aria-describedby="fullName">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"dropdownWidth": "300px",
"dropdownLeft": true
}'>
<option value="4" selected>Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
<a class="btn btn-primary" href="javascript:;">Search</a>
</div>
<!-- End Append -->
Multiple
<!-- Select -->
<div class="tom-select-custom tom-select-custom-with-tags">
<select class="js-select form-select" autocomplete="off" multiple
data-nue-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
Multiple selection
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off" multiple
data-nue-tom-select-options='{
"singleMultiple": true,
"hideSelected": false,
"placeholder": "Select user"
}'>
<option value="">Select a person...</option>
<option value="4" selected>Thomas Edison</option>
<option value="1" selected>Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
With search inside dropdown
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select user..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
With search inside select box
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"searchInDropdown": false,
"hidePlaceholderOnSearch": true,
"placeholder": "Select a person..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
With Icon
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select">
<option value="privacy1" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><i class="bi-globe"></i></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semi-bold">Anyone</span><span class="tom-select-custom-hide small">Visible to anyone who can view your content. Accessible by installed apps.</span></div></div>'>Anyone</option>
<option value="privacy2" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><i class="bi-lock"></i></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semi-bold">Only you</span><span class="tom-select-custom-hide small">Only visible to you.</span></div></div>'>Only you</option>
</select>
</div>
<!-- End Select -->
Optgroup
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select gear...</option>
<optgroup label="Climbing">
<option value="pitons">Pitons</option>
<option value="cams">Cams</option>
<option value="nuts">Nuts</option>
<option value="bolts">Bolts</option>
<option value="stoppers">Stoppers</option>
<option value="sling">Sling</option>
</optgroup>
<optgroup label="Skiing">
<option value="skis">Skis</option>
<option value="skins">Skins</option>
<option value="poles">Poles</option>
</optgroup>
</select>
</div>
<!-- End Select -->
Custom tags
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off" multiple
data-nue-tom-select-options='{
"create": true,
"placeholder": "Create custom tag..."
}'>
</select>
</div>
<!-- End Select -->
With images
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" id="locationLabel">
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" /><span class="text-truncate">El Salvador</span></span>'>El Salvador</option>
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" /><span class="text-truncate">Equatorial Guinea</span></span>'>Equatorial Guinea</option>
</select>
</div>
<!-- End Select -->
Dropup
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person...",
"hideSearch": true,
"dropup": true
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
Alignment
<!-- Select -->
<div class="tom-select-custom tom-select-custom-end">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person...",
"hideSearch": true,
"dropdownWidth": "11rem"
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold</option>
</select>
</div>
<!-- End Select -->
Responsive alignment
<!-- Select -->
<div class="tom-select-custom tom-select-custom-lg-end">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person...",
"hideSearch": true,
"dropdownWidth": "11rem"
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold</option>
</select>
</div>
<!-- End Select -->
Sizing
<div class="mb-3">
<div style="max-width: 40rem;">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select form-select-sm" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
</div>
</div>
<div class="mb-3">
<div style="max-width: 40rem;">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
</div>
</div>
<div style="max-width: 40rem;">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select form-select-lg" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
</div>
Modal example
Select
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-nue-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
Parameters | Description | Default value |
---|---|---|
| Set width for select field. | null |
| Set width for dropdown. | null |
| Align the drawdown to the left when the nue_smart_position plugin is enabled. | false |
| Remove search field. | false |
| Set disabled state for search field. | false |
| Enable "singleMultiple" mode for multiple select. | false |
| Tom sleect and custom plugins. | {nue_smart_position: {}} |
| Insert search field in dropdow. | true |
| Hide placeholder on searhc or if item is seleted. searchInDropdown should be false . | false |
| Place the menu on top. | false |
| Custom render. |
render: {
'option': function(data, escape) {
return data.optionTemplate || `<div>${data.text}</div>`
},
'item': function(data, escape) {
return data.optionTemplate || `<div>${data.text}</div>`
}
}
|