Select

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 scope

• options 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 '')
  • options.closeLabelAttribute (optional, default 'data-ecl-select-close')
  • options.clearAllLabelAttribute (optional, default 'data-ecl-select-clear-all')
  • options.selectMultiplesSelectionCountSelector (optional, default 'ecl-select-multiple-selections-counter')
  • options.closeButtonLabel (optional, default '')
  • options.clearAllButtonLabel (optional, default '')

init

Initialise component.

destroy

Destroy component.

updateSelectionsCount

Parameters

• i Integer

handleToggle

Parameters

• e Event

handleClickOption

Parameters

• e Event

handleClickSelectAll

Parameters

• e Event

handleFocusout

Parameters

• e Event

handleSearch

Parameters

• e Event

handleClickOutside

Parameters

• e Event

handleKeyboardOnSelect

Parameters

• e Event

handleKeyboardOnSelectAll

Parameters

• e Event

handleKeyboardOnOptions

Parameters

• e Event

handleKeyboardOnSearch

Parameters

• e Event

handleKeyboardOnOption

Parameters

• e Event

handleKeyboardOnClearAll

Parameters

• e Event

handleKeyboardOnClose

Parameters

• e Event

moveFocus

Parameters

• upOrDown

handleClickOnClearAll

Reset values of the Multiselect.

resetForm

Reset Multiselect.

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope
• defaultOptions (optional, default {})

Returns Select An instance of Select.

createSvgIcon

Parameters

• icon
• classes

Returns HTMLElement

createCheckbox

Parameters

• options Object

  • options.id String
  • options.text String
  • options.extraClass String? additional CSS class
  • options.disabled String? relevant when re-creating an option
  • options.selected String? relevant when re-creating an option

• ctx String

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' }
);