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.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.closeLabelAttribute String The data attribute for the close button (optional, default 'data-ecl-select-close')
  • options.clearAllLabelAttribute String The data attribute for the clear all button (optional, default 'data-ecl-select-clear-all')
  • options.selectMultiplesSelectionCountSelector String The selector for the counter of selected options (optional, default 'ecl-select-multiple-selections-counter')
  • options.closeButtonLabel String The label of the close button (optional, default '')
  • options.clearAllButtonLabel String The label of the clear all button (optional, default '')
  • options.noResultsText (optional, default '')

init

Initialise component.

destroy

Destroy component.

update

Update instance.

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

handleEsc

Parameters

• e Event

moveFocus

Parameters

• upOrDown

handleClickOnClearAll

Parameters

• e Event 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 default has been prevented.

Parameters

• e Event

generateRandomId

Generate random string

Parameters

• length number

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