API
Select
There are multiple labels contained in this component. You can set them in 2 ways: directly as a string or through data attributes. Textual values have precedence and if they are not provided, then DOM data attributes are used.
Parameters
element
HTMLElement DOM element for component instantiation and scopeoptions
Object (optional, default{}
)options.defaultText
String The default placeholder (optional, default''
)options.searchText
String The label for search (optional, default''
)options.selectAllText
String The label for select all (optional, default''
)options.selectMultipleId
String The id attribute of the select multiple (optional, default'select-multiple'
)options.selectMultipleSelector
String The data attribute selector of the select multiple (optional, default'[data-ecl-select-multiple]'
)options.defaultTextAttribute
String The data attribute for the default placeholder text (optional, default'data-ecl-select-default'
)options.searchTextAttribute
String The data attribute for the default search text (optional, default'data-ecl-select-search'
)options.selectAllTextAttribute
String The data attribute for the select all text (optional, default'data-ecl-select-all'
)options.noResultsTextAttribute
String The data attribute for the no results options text (optional, default'data-ecl-select-no-results'
)options.noResultsText
(optional, default''
)
init
Initialise component.
destroy
Destroy component.
handleToggle
Parameters
e
Event
handleClickOption
Parameters
e
Event
handleClickSelectAll
Parameters
e
Event
handleFocusout
Parameters
e
Event
handleSearch
Parameters
e
Event
handleClickOutside
Parameters
e
Event
autoInit
Parameters
root
HTMLElement DOM element for component instantiation and scopedefaultOptions
(optional, default{}
)
Returns Select An instance of Select.
createSvgIcon
Parameters
icon
classes
Returns HTMLElement
createCheckbox
Parameters
Returns HTMLElement
createSelectIcon
Returns HTMLElement
checkCheckbox
Manually checks an ECL-specific checkbox when previously defualt has been prevented.
Parameters
e
Event
Setup
There are 2 ways to initialise the select multiple component.
Automatic
Add data-ecl-auto-init="Select"
attribute to component's markup:
Use the ECL
library's autoInit()
(ECL.autoInit()
) when your page is ready or other custom event you want to hook onto.
Manual
Get target element, create an instance and invoke init()
.
Given you have 1 element with an attribute data-ecl-select-multiple
on the page:
var elt = document.querySelector('[data-ecl-select-multiple]');
var select = new ECL.Select(elt);
select.init();
It's also possible to use the Select
's autoInit
method and pass specific labels for the element:
var select = ECL.Select.autoInit(
document.querySelector('[data-ecl-select-multiple]'),
{ defaultText: 'string', searchText: 'string', selectAllText: 'string' }
);