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
    },
    // minimum input length on popup search
    minimumInputLength: 1,
    
});

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.4.4 (09/02/2023)

• Bugfixes

v1.4.1 (08/29/2023)

• Bugfixes

v1.4.0 (06/26/2023)

• Input can now be the already selected HTML Dom >select> object so you do not need to give a CSS selector
• Added new parameter for a minimum input length on popup search named minimumInputLength
• Bugfix

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