Choices
Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
- License: MIT
- https://joshuajohnson.co.uk/Choices/
Examples
<select class="form-select mb-3" data-choices='{"itemSelectText":"Press to select","searchEnabled":true}'>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<!-- Vendor : Choices -->
<link rel="stylesheet" href="../assets/vendors/choices.js/public/assets/styles/choices.min.css">
<!-- Vendor : Choices -->
<script src="../assets/vendors/choices.js/public/assets/scripts/choices.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll("[data-choices]").forEach(function(el) {
let conf = el.getAttribute('data-choices');
conf = conf ? JSON.parse( conf ) : {};
new Choices(el, Object.assign({
shouldSort: true,
shouldSortItems: false,
classNames: {
containerOuter: 'choices',
containerInner: 'choices__inner',
input: 'choices__input',
inputCloned: 'choices__input--cloned',
list: 'choices__list',
listItems: 'choices__list--multiple',
listSingle: 'choices__list--single',
listDropdown: 'choices__list--dropdown',
item: 'choices__item',
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice',
placeholder: 'choices__placeholder',
group: 'choices__group',
groupHeading: 'choices__heading',
button: 'choices__button',
activeState: 'is-active',
focusState: 'is-focused',
openState: 'is-open',
disabledState: 'is-disabled',
highlightedState: 'is-highlighted',
selectedState: 'is-selected',
flippedState: 'is-flipped',
loadingState: 'is-loading',
noResults: 'has-no-results',
noChoices: 'has-no-choices'
},
}, conf) );
});
});
</script>