Author: | kevingostomski |
---|---|
Views Total: | 76 views |
Official Page: | Go to website |
Last Update: | May 17, 2023 |
License: | MIT |
Preview:

Description:
A Bootstrap plugin that converts select boxes into responsive, user-friendly, modern-looking, list-style selectors.
Instead of selecting options from the dropdown list, Bootstrap-Nice-Select enables users to search, filter, and pick options in a popup.
More Features:
- Compatible with Bootstrap 5 and Bootstrap 4.
- Adapt to various languages and regions, catering to a global audience.
- Supports both local and remote data sources.
- Easily customize colors, borders, shadows, and more using the included SASS variables and maps.
How to use it:
1. Load the required Bootstrap framework and an icon set of your choice in the document.
<!-- Bootstrap --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script> <!-- Font Awesome --> <link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
2. Download and load the Bootstrap-Nice-Select’s files.
<link rel="stylesheet" href="dist/css/bootstrap-nice-select.min.css" /> <script src="dist/js/bootstrap-nice-select.min.js"></script>
3. Add the data-bs-toggle="bootstrap-nice-select"
to the existing select box and the plugin will do the rest.
<select multiple="multiple" data-bs-toggle="bootstrap-nice-select"> <optgroup label="Fruits"> <option value="apple">Apple</option> <option value="banana" selected>Banana</option> <option value="orange">Orange</option> </optgroup> <optgroup label="Vegetables"> <option value="carrot" selected>Carrot</option> <option value="potato">Potato</option> <option value="broccoli">Broccoli</option> </optgroup> <optgroup label="Meat"> <option value="chicken">Chicken</option> <option value="beef">Beef</option> <option value="fish" selected>Fish</option> </optgroup> </select>
4. Or initialize the plugin via JavaScript.
let select = bootstrapNiceSelect.BootstrapNiceSelect("#select");
5. Load options from a remote data source.
let remoteData = { items: [ { id: "Cherry", text: "Cherry", optGroup: "Fruits" }, // ... ] }
function callRemoteData(filter) { filter = filter.toUpperCase(); // put AJAX or Fetch for Remote JSON object here let toRet = structuredClone(remoteData); toRet.items = toRet.items.filter(data => data.text.toUpperCase().indexOf(filter) > -1); return toRet; } let select = bootstrapNiceSelect.BootstrapNiceSelect("#select", { searchData: 'callRemoteData' });
6. Available plugin options.
let select = bootstrapNiceSelect.BootstrapNiceSelect("#select",{ // enable animation animation: true, // enable multiple select multiple: false, // is disabled disabled: false, // display as a tags input tags: false, tokenSeparators: [',', ' ', 'Enter'], // see /src/js/locale/ locale: "en-US", // custom icons set // 'glyphicon', 'font-awesome-6', 'font-awesome-5' // 'font-awesome-4', 'material-icons', 'bi' theme: 'font-awesome-6', // make the list scrollable scrollable: { on: false, height: undefined }, });
7. API methods.
// select/deselect options select.bootstrapNiceSelect('select', item1, item2, item3, ...) select.bootstrapNiceSelect('selectAll') select.bootstrapNiceSelect('deselect', item1, item2, ...) select.bootstrapNiceSelect('deselectAll') // show/hide the selector select.bootstrapNiceSelect('show') select.bootstrapNiceSelect('hide') // show/hide the popup select.bootstrapNiceSelect('open') select.bootstrapNiceSelect('close') // destroy the plugin select.bootstrapNiceSelect('destroy')
8. Events.
// insert document.querySelector("#select").addEventListener("inserted.bs.bootstrap-nice-select", function (e) { alert(`ADDED = Key: '${e.detail.key}' | Text: '${e.detail.value}'`); }); // removed document.querySelector("#my-select").addEventListener("removed.bs.bootstrap-nice-select", function (e) { alert(`REMOVED = Key: '${e.detail.key}' | Text: '${e.detail.value}'`); });
Changelog:
v1.3.0 (05/17/2023)
- Tags creation can now be constrained with the help of the option tagsCheck which needs a function to return a Boolean
- Support to override option tokenSeparators. This was already possible when using JavaScript initialization and you know that this property existed. Is is now possible via data attributes too and is getting documented. The tagging helper text got updated too so it represents the possible token separators
- Animation added for the overlay container (popup window) which can now be disabled via data-animation
- i18n (localisation) is rewritten. One js file per possible locale is added which is using the selected language. The currently used standard file is only supporting en. Added a file bootstrap-nice-select-locale-all.js with all locales like the old one which used en as default language
- Property data-animation triggers now if animation exists for overlay and programmatic control functions
- Bugfixes