User-friendly Multi Select Plugin For Bootstrap 4 - BsMultiSelect

User-friendly Multi Select Plugin For Bootstrap 4 - BsMultiSelect
File Size: 190 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another multi-select plugin for Bootstrap 4 framework that converts a multi-select list into an easy to use dropdown with checkboxes.

You users are able to select one or more options from the dropdown list by clicking the checkboxes. To clear the selection, just click the x icon inside the selected options just like the tags input.

Licensed under APACHE 2.

How to use it:

1. To use the plugin, make sure you have jQuery library and Bootstrap 4 framework installed.

<!-- Stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">

<!-- jQuery & Bootstrap -->
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Load the jQuery BsMultiSelect plugin's script after jQuery.

<script src="dist/js/BsMultiSelect.js"></script>

3. Just call the function dashboardCodeBsMultiSelect on the multi select list and the plugin will do the rest.

<select name="states" id="example" class="form-control"  multiple="multiple" style="display: none;">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option selected value="CA">California</option>
  ...
</select>
$(function(){

  $("select").bsMultiSelect();

});

4. You can also define the options in the JavaScript as follows.

<div class="container">
  ...
</div>
$('.container').bsMultiSelect({
  options : [
    {text:"Asia", value:"C0",hidden:false,disabled:false,selected:true},
    {text:"Europe",value:"C1",hidden:false,disabled:false,selected:false},
    {text:"Australia",value:"C2",hidden:false,disabled:false,selected:false}
  ],
  getDisabled : () => {},
  getIsValid : () => {},
  getIsInvalid : () => {}
});

5. Default options to customize the plugin.

$("select").bsMultiSelect({
  selectedPanelDefMinHeight: 'calc(2.25rem + 2px)',
  selectedPanelLgMinHeight: 'calc(2.875rem + 2px)',
  selectedPanelSmMinHeight: 'calc(1.8125rem + 2px)',
  selectedPanelDisabledBackgroundColor: '#e9ecef',
  selectedPanelFocusBorderColor: '#80bdff',
  selectedPanelFocusBoxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',
  selectedPanelFocusValidBoxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)',
  selectedPanelFocusInvalidBoxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)',
  filterInputColor: '#495057',
  selectedItemContentDisabledOpacity: '.65',
  dropdDownLabelDisabledColor: '#6c757d'
});

6. Style the plugin using your own CSS styles.

$("select").bsMultiSelect({
  useCss: true,
  containerClass: 'dashboardcode-bsmultiselect',
  dropDownMenuClass: 'dropdown-menu',
  dropDownItemClass: 'px-2',
  dropDownItemHoverClass: 'text-primary bg-light',
  selectedPanelClass: 'form-control',
  selectedItemClass: 'badge',
  removeSelectedItemButtonClass: 'close',
  filterInputItemClass: '',
  filterInputClass: '',
  selectedPanelFocusClass : 'focus',
  selectedPanelDisabledClass: 'disabled',
  selectedItemContentDisabledClass: 'disabled'
});

Changelog:

v0.4.17 (2019-12-11)

  • Supports fieldset

v0.4.10/11/12 (2019-12-08)

  • form reset support
  • removed console output
  • now "GetContainer" returns container div
  • fixed bugs

v0.4.10/11/12 (2019-12-07)

  • uncheck selected error has been solved
  • esc first close the dropdown then modal

v0.4.9 (2019-12-06)

  • small optimizations & bug fix

v0.4.6 (2019-12-03)

  • Bugfix

v0.4.5 (2019-11-28)

  • ESC keydown now processed with preventDefault (to do not duplicate clear text custom functionality)

v0.4.4 (2019-11-27)

  • click inside selected panel doesn't clear the filter input (we have bootrap x for this and ESC button)

v0.4.3 (2019-11-26)

  • Fixed: "two dropdown items can be hovered for a moment" (one by mouse second from keyboard)

v0.4.2 (2019-11-13)

  • configuration API changed; "selected" happens when full text entered

v0.4.1 (2019-11-01)

  • added "buildConfiguration" method

v0.4.0 (2019-10-25)

  • added "buildConfiguration" method
  • id generation for label-input was redesigned once more time (now id is used first, if id is absent then name is used)
  • checkbox without ids from now (js events are used to reference label and checbox, not "for-id" functionality).

v0.3.0 (2019-10-21)

  • configuration object is now named "configuration" (was options)
  • id generation - new ids (btw, id generation can be customized assigning configuration.createCheckBoxId and configuration.createInputId methods)

v0.2.24 (2019-07-28)

  • adding (hardcoded) css foat:none to "cancel" button span (x)  because BS team have added float:rigth to it (why?) in one of newest BS versions; this was the reason that sometimes badge's "x" button moved to new line separately.

v0.2.23 (2019-07-27)

  • support bsMultiSelect on dropdown: click to remove/unselect the item is now processed in setTimout(..,0) this helps filter out close clicks in dropdown's hide event handler (investigate that clicks target was bsMultiSelect and ignore it)

v0.2.22 (2019-04-12)

  • better UX, when only one left in aotosuggestion list - tab and enter select it

2018-10-11

  • height initial -> auto since IE11 doesn't support initial (and node updates)

2018-07-25

  • support BS 4.1.3 fixed height form-control

2018-06-25

  • fix "can select disable"

2018-06-23

  • v0.2.9: Bugfix

2018-06-22

  • v0.2.7

2018-06-20

  • Bugfix

2018-06-13

  • renamed readonly to disabled

2018-06-11

  • dispose for label click return last for value

2018-06-06

  • fixe auto close after selection
  • fix options bug

2018-06-05

  • trigger change on original select

2018-06-02

  • dynamic disabled support

2018-05-31

  • adoptFilterInputLength in clearFilterInput

2018-05-24

  • adoptFilterInputLength in clearFilterInput

2018-05-23

  • v0.1.3: code adjusted by eslint; fixed bug with visible menu selector

2018-05-21

  • v0.1.0

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