Create Enhanced Bootstrap 5 Choose Enter With bs-select.js

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

Options:

• Helps single choose, a number of choose, and choice teams.
• Actual-time search that makes choice choice fast and easy.
• Permits you to add customized icons to choices utilizing Third-party icon libraries like Font Superior and Bootstrap Icons.
• Comes with quite a few choices for customizing the looks and conduct of the dropdown component.
• Quite a lot of strategies and occasions for interacting with the dropdown choose.

How you can use it:

1. To get began, load the jQuery bs-select.js plugin and different required sources within the doc.

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

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

<!-- Bootstrap Icons  -->
<hyperlink 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. Name the operate bsSelect in your choose component and the plugin will do the remaining.

<choose>
  ...
</choose>

$(operate(){ 
  $('choose').bsSelect();
});

3. Append small descriptions to choices.

<choose>
  <choice data-subtext="jQuery Script" worth="1">jQuery</choice>
</choose>

4. Add customized icons (CSS courses) to choices.

<choose>
  <choice data-icon="fa-brands fa-square-js" worth="1">jQuery</choice>
</choose>

5. All plugin choices to customise the dropdown choose. Be aware that every choice may be handed by way of HTML knowledge attributes as follows.

$.bsSelect.setDefaults({

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

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

  // 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,

  // present the chosen textual content
  showSelectedText: operate (rely, complete) {
    return rely + ' of ' + complete +' chosen';
  },

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

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

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

6. API strategies.

// present/cover the dropdown
$('choose').bsSelect('present');
$('choose').bsSelect('cover');

// get the worth
$('choose').bsSelect('val', 1);

// choose all choices
$('choose').bsSelect('selectAll');

// deselect all choices
$('choose').bsSelect('selectNone');

// update choices
$('choose').bsSelect('updateOptions', {
  // choices right here
});

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

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

7. Occasions.

• cover.bs.choose
• hidden.bs.choose
• present.bs.choose 
• proven.bs.choose
• refresh.bs.choose
• change.bs.choose
• replace.bs.choose
• destroy.bs.choose
• selectAll.bs.choose
• selectNone.bs.choose
• any.bs.choose

Changelog:

2023-06-10

This superior jQuery plugin is developed by ThomasDev-de. For extra Superior Usages, please verify the demo web page or go to the official web site.