@dariovinci/bs-multiselect

BS MULTISELECT

A light and simple multi select for bootstrap 5. If you like it you can support my work buying me a cofee: https://buymeacoffee.com/dariovinci

HOW TO USE IT

Wrap an input (an optionally a label) field in a div and choose an id. Example: multiselect-test

<div id="multiselect-users-wrapper">
    <input type="text" class="form-control">
    <label for="multiselect-users">Utenti</label>
</div>

You can also use bs-multiselect with form floating. Example:

<div id="multiselect-test">
    <div class="form-floating">
        <input type="text" class="form-control">
        <label for="multiselect-users">Utenti</label>
    </div>
</div>

Then in your js file add:

const multiselect_test = new BsMultiselect({
  inputId: '#multiselect-test',
  dataArray: [],
  selectAll: true,
  showCompactSelection: true,
  maxHeight: 200px,
  showSearchBox: true,
});

OPTIONS

OPTION	VALUE
inputId		Id of the dig wrapping the input field
dataArray	[{ 'value': '1', 'text': 'Option 1' }, { 'value': '2', 'text': 'Option 2' }	dataArray is an array of obcjects where the first key pair is the checkbox value and the second key pair is the text you want to display
selectAll	(boolean) true/false	Set true if you want to select all the option on init
showCompactSelection	(boolean) true/false	Set true to display a compact view when there are 2+ selected options
maxHeight	(text)200px	Set the max height of the dropdown menu
showSearchBox	(boolean) true/false	Set true to display a search box to easily filter your select options
ajaxSourceUrl	url	Url that will be used to fetch your options. Use only if dataArray is not defined and make sure that the response has the correct structure (like dataArray)
ajaxCreateDataArray	function	You can manipulate the data fetched by the ajax call and return them. Check the below example

ajaxCreateDataArray Example:

const multiselect_test = new BsMultiselect({
  inputId: '#multiselect-test',
  dataArray: [],
  selectAll: true,
  showCompactSelection: true,
  maxHeight: 200px,
  showSearchBox: true,
  ajaxCreateDataArray: (resp) => {
    let dataArray = [];
    for (let i = 0; i < resp.length; i++) {
	const element = resp[i];
	dataArray.push({
	    value: element.id,
	    text: element.name
	})

    }
    return dataArray;
}
});

METHODS

METHOD
getselectedItems()	Returns an array of object with the same structure of dataArray defined at config
getselectedItemsValues()	Returns an array ot the selected values
setSelectedElements(valuesArray, checked)	valuesArray: array of value to select/deselect. checked: (boolean) true/false
updateOptionsList(dataArray)	Replace options with new ones
reset()	Reset the multiselect to the deafault state.