A simple and light multiselect for bootstrap written in JS
npm install @dariovinci/bs-multiselectWrap an input (an optionally a label) field in a div and choose an id. Example: multiselect-test
``html`
You can also use bs-multiselect with form floating. Example:
`html`
Then in your js file add:
`js`
const multiselect_test = new BsMultiselect({
inputId: '#multiselect-test',
dataArray: [],
selectAll: true,
showCompactSelection: true,
maxHeight: 200px,
showSearchBox: true,
});
| 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 |
`js
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;
}
});
``
| 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. |