Create Enhanced Bootstrap 5 Select Input With bs-select.js

bs-select.js is the upgraded version of the jQuery bsSelectDrop plugin, which converts a basic select element into an enhanced and customizable Bootstrap 5 dropdown component.

Features:

• Supports single select, multiple select, and option groups.
• Real-time search that makes option selection quick and effortless.
• Allows you to add custom icons to options using 3rd-party icon libraries like Font Awesome and Bootstrap Icons.
• Comes with numerous options for customizing the appearance and behavior of the dropdown element.
• A variety of methods and events for interacting with the dropdown select.

How to use it:

1. To get started, load the jQuery bs-select.js plugin and other required resources in the document.

<!-- jQuery  -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Icons  -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.css" />

<!-- jQuery bs-select.js -->
<script src="/path/to/dist/jquery.bs-select.min.js"></script>

2. Call the function bsSelect on your select element and the plugin will do the rest.

<select>
  ...
</select>

$(function(){ 
  $('select').bsSelect();
});

3. Append small descriptions to options.

<select>
  <option data-subtext="jQuery Script" value="1">jQuery</option>
</select>

4. Add custom icons (CSS classes) to options.

<select>
  <option data-icon="fa-brands fa-square-js" value="1">jQuery</option>
</select>

5. All plugin options to customize the dropdown select. Note that each option can be passed via HTML data attributes as follows.

$.bsSelect.setDefaults({

  // data-btn-width
  btnWidth: 'fit-content',

  // data-btn-empty-text
  btnEmptyText: 'Please select..',

  // data-btn-split
  btnSplit: false,

  // data-drop-direction
  // dropup|dropend|dropstart|dropdown-center|dropup-center
  dropDirection: null,

  // data-menu-header-class
  menuHeaderClass: 'text-bg-secondary text-uppercase',

  // data-menu-item-class
  menuItemClass: null,

  // data-btn-class
  btnClass: 'btn-outline-dark',

  // data-btn-split
  btnSplit: false,

  // data-search
  search: true,

  // data-search-text
  searchText: "Search..",

  // data-menu-pre-html
  menuPreHtml: null,

  // data-menu-append-html
  menuAppendHtml: null,

  // data-menu-max-height
  menuMaxHeight: 300,

  // data-show-subtext
  showSubtext: true,

  // data-show-action-menu
  showActionMenu: true,

  // data-action-menu-btn-class
  actionMenuBtnClass: 'btn-light',

  // data-show-selection-as-list
  showSelectionAsList: false,

  // show the selected text
  showSelectedText: function (count, total) {
    return count + ' of ' + total +' selected';
  },

  // data-deselect-all-text
  deselectAllText: 'Deselect All',

  // data-select-all-text
  selectAllText: 'Select All',

  // data-checked-icon
  checkedIcon: "bi bi-check-lg",
  debug: false,
  debugElement: null,

  // callback functions
  onBeforeChange: ($select) => { return true; }
  onKeyDown: ($select, keyEvent) => { // }
  
});

6. API methods.

// show/hide the dropdown
$('select').bsSelect('show');
$('select').bsSelect('hide');

// get the value
$('select').bsSelect('val', 1);

// select all options
$('select').bsSelect('selectAll');

// deselect all options
$('select').bsSelect('selectNone');

// update options
$('select').bsSelect('updateOptions', {
  // options here
});

// refresh the dropdown
$('select').bsSelect('refresh');

// destroy the dropdown
$('select').bsSelect('destroy');

7. Events.

• hide.bs.select
• hidden.bs.select
• show.bs.select 
• shown.bs.select
• refresh.bs.select
• change.bs.select
• update.bs.select
• destroy.bs.select
• selectAll.bs.select
• selectNone.bs.select
• any.bs.select
• keydown.bs.select

Changelog:

2024-03-28

• Add 'onKeyDown' function and related event

2024-03-06

• Update click event handling for labels in jquery.bs-select.js

2024-03-05

• Update attribute check in jquery.bs-select.js

2024-02-26

• 'Enter' keyup event has been introduced to make user interaction easier and quicker during dropdown searches. This event handler selects the first visible option from the search results. Dropdown items also now utilize an anchor tag, thereby improving both creation and selection processes.

2024-02-20

• Update condition for 'isDisabled' in jquery.bs-select.js

2024-02-19

• Refactor code for Bootstrap dropdown functionality

2023-06-17

• JS update

2023-06-13

• JS update

2023-06-12

• Add split option

---

This awesome jQuery plugin is developed by ThomasDev-de. For more Advanced Usages, please check the demo page or visit the official website.