Modern Select Box Alternative – Better-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, Better-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/better-nice-select.min.css" />
<script src="dist/js/better-nice-select.min.js"></script>

3. Add the data-toggle="better-nice-select" to the existing select box and the plugin will do the rest.

<select multiple data-toggle="better-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 elements = document.querySelectorAll('[data-toggle="better-nice-select"]');
elements.forEach(element => new betterNiceSelect.BetterNiceSelect(element));

5. Load options from a remote data source.

let remoteData = {
    items: [
      {
        id: "Cherry",
        text: "Cherry",
        optGroup: "Fruits"
      },
      // ...
    ]
}

function callRemoteData(filter) {
  filter = filter.toLowerCase();
  // put AJAX or Fetch for Remote JSON object here and use the filter string to only return items searched
  let toRet = structuredClone(dbData);
  toRet.items = toRet.items.filter(data => data.text.toLowerCase().indexOf(filter) > -1);
  return toRet;
}
let select = new betterNiceSelect.BetterNiceSelect("#select", {
  customSearch: 'callRemoteData'
});

6. Available plugin options.

let select = new betterNiceSelect.BetterNiceSelect("#select",{
    // enable animation
    // data-animation
    animation: true,
    // load the optiongroups for a select field if you do not want to prerender them in the HTML
    // data-custom-optiongroup-labels
    customOptiongroupLabels: undefined,
    // add some logic to the select field to return a Boolean if an invalid value is entered
    // data-custom-tag-check
    customTagCheck: undefined,
    // is disabled
    disabled: false,
    
    // display as a tags input
    // data-tags
    tags: false,
    // the separators that should be used when tokenizing
    // data-token-separators
    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'
    icons: {
      search: '<svg class="better-nice-select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>',
      delete: '<svg class="better-nice-select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>',
      add: '<svg class="better-nice-select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>',
      tag: '<svg class="better-nice-select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>'
    },
    // debounce functionality of the search input in ms
    // data-input-delay
    inputDelay: 400,
    // make the list scrollable
    // data-scrollable-on
    scrollable: false,
    // data-scrollable-height
    height: undefined,
    
});

7. API methods.

// select/deselect options
select.select(item1, item2, item3, ...)
select.selectAll()
select.deselect(item1, item2, ...)
select.deselectAll()
// show/hide the selector
select.show()
select.hide() 
// show the popup
select.open()
// destroy the plugin
select.destroy()

8. Events.

// insert
document.querySelector("#select").addEventListener("inserted.better-nice-select", function (e) {
  alert(`ADDED = Key: '${e.detail.key}' | Text: '${e.detail.value}'`);
});
// removed
document.querySelector("#my-select").addEventListener("removed.better-nice-select", function (e) {
  alert(`REMOVED = Key: '${e.detail.key}' | Text: '${e.detail.value}'`);
});

Changelog:

11/22/2024

• Bugfixes

05/21/2024

• Rename to better-nice-select

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