MultiSelect

MultiSelect written in TypeScript.

Usage

Include the JS file:

import { MultiSelect } from '@erkenes/multiselect';

const select = document.querySelector('select');

// the options are optional
const multiselect = new MultiSelect(select, {
    translations: {
    selectAll: 'Select all',
    searchPlaceholder: 'Search...',
    selected: '%i selected',
  }
});

Include the scss file (or use the created dist file):

@import '@erkenes/multiselect/src/styles/multiselect';

Options

Name	Type	Default	Description
placeholder	string	Select item(s)	The placeholder that is shown if no option is selected
max	number	null	Limits the selection. If the select does not have the attribute multiple then the value is 1.
min	number	null	Minimum options that have to be selected.
placeholderType	string	default	default: Show all selected values in the header. count: Show the amount of selected values., static: always shows the label
showMaxHint	boolean	false	Show a hint in the header how many items can be selected.
search	boolean	if options > 6	Show a search field to filter the values. If the count of options is > 6 the search is shown
selectAll	boolean	false	Show a button to de-/select all values. (max must be greater than 1 or null)
closeListOnItemSelect	boolean	if multiple	Close the dropdown if a item is selected. If the select has the attribute multiple the values is false
showApplyButton	boolean	true	Show an apply button if the select allowse multiple and closeListOnItemSelect is set to false
showCheckbox	boolean	true	Show the checkboxed next to the input text
name	string	null	(optional) The name of the dropdown. The name-attribute of the Select-Element is selected.
width	number|string	null	(optional) force the width of the header
height	number|string	null	(optional) force the height of the header
dropdownWidth	number|string	null	(optional) force the width of the dropdown
dropdownHeight	number|string	null	(optional) force the height of the dropdown
dropdownAutoWidth	boolean	false	(optional) sets the width to the size of the select element
data	Array	[]	(optional) The options. The options will be read from the Select-Element
translations	JSON	see Translations	(optional) Overwrite the labels

Options with Data-Attributes

You can override the default values, passed through the JavaScript, with additional Data-Attributes and the prefix ms-.

<select data-ms-placeholder="Select an element">
  <option value="foo">example</option>
</select>

Translations

{
  translations: {
    selectAll: 'Select all',
    searchPlaceholder: 'Search...',
    selected: '%i selected',
    applyButton: 'Apply',
  }
}