Modern Select Box Alternative – Bootstrap-Nice-Select

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