Select

Select

This API mostly refers to the multiple select, in the default select only three methods are actually used: handleToggle(), handleKeyboardOnSelect() and handleEsc().

For the multiple 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.

Constructor

new Select(element, options)

Source:
Parameters:
NameTypeDescription
elementHTMLElement

DOM element for component instantiation and scope

optionsObject
Properties
NameTypeDescription
defaultTextString

The default placeholder

searchTextString

The label for search

selectAllTextString

The label for select all

selectMultipleSelectorString

The data attribute selector of the select multiple

defaultTextAttributeString

The data attribute for the default placeholder text

searchTextAttributeString

The data attribute for the default search text

selectAllTextAttributeString

The data attribute for the select all text

noResultsTextAttributeString

The data attribute for the no results options text

closeLabelAttributeString

The data attribute for the close button

clearAllLabelAttributeString

The data attribute for the clear all button

selectMultiplesSelectionCountSelectorString

The selector for the counter of selected options

closeButtonLabelString

The label of the close button

clearAllButtonLabelString

The label of the clear all button

Classes

Select

Methods

destroy()

Description:

  • Destroy the component instance.

Source:

handleClickOnClearAll(e)

Description:

  • Event callback to handle the click on the clear all button.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleClickOption(e)

Description:

  • Event callback to handle the click on a checkbox.

Source:
Parameters:
NameTypeDescription
eEvent

handleClickOutside(e)

Description:

  • Event callback to handle the click outside the select.

Source:
Parameters:
NameTypeDescription
eEvent

handleClickSelectAll(e)

Description:

  • Event callback to handle the click on the select all checkbox.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleEsc(e)

Description:

  • Event callback to handle different events which will close the dropdown.

Source:
Parameters:
NameTypeDescription
eEvent

handleFocusout(e)

Description:

  • Event callback to handle moving the focus out of the select.

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboardOnClearAll(e)

Description:

  • Event callback to handle keyboard events on the clear all button.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleKeyboardOnClose(e)

Description:

  • Event callback for handling keyboard events in the close button.

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboardOnOption(e)

Description:

  • Event callback to handle the click on an option.

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboardOnOptions(e)

Description:

  • Event callback to handle keyboard events on the dropdown.

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboardOnSearch(e)

Description:

  • Event callback to handle keyboard events

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboardOnSelect(e)

Description:

  • Event callback to handle keyboard events on the select.

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboardOnSelectAll(e)

Description:

  • Event callback to handle keyboard events on the select all checkbox.

Source:
Parameters:
NameTypeDescription
eEvent

handleSearch(e)

Description:

  • Event callback to handle the user typing in the search field.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleToggle(e)

Description:

  • Event callback to show/hide the dropdown

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

init()

Description:

  • Initialise component.

Source:

on(eventName, callback) → {void}

Description:

  • Register a callback function for a specific event.

Source:
Example
// Registering a callback for the 'onToggle' event
select.on('onToggle', (event) => {
  console.log('Toggle event occurred!', event);
});
Parameters:
NameTypeDescription
eventNamestring

The name of the event to listen for.

callbackfunction

The callback function to be invoked when the event occurs.

Returns:
Type
void

resetForm()

Description:

  • Event callback to reset the multiple select on form reset.

Source:

setCurrentValue(values, opopt)

Description:

  • Set the selected value(s) programmatically.

Source:
Example
// Replace current selection with new values
setCurrentValue(['value1', 'value2']);

// Add to current selection without clearing previous selections
setCurrentValue(['value3', 'value4'], 'add');
Parameters:
NameTypeAttributesDefaultDescription
valuesstring | Array.<string>

A string or an array of values or labels to set as selected.

opstring<optional>
'replace'

The operation mode. Use 'add' to keep the previous selections.

Throws:

Throws an error if an invalid operation mode is provided.

Type
Error

trigger(eventName, eventData)

Description:

  • Trigger a component event.

Source:
Parameters:
NameTypeDescription
eventNamestring

The name of the event to trigger.

eventDataany

Data associated with the event.

update(i)

Description:

  • Update instance.

Source:
Parameters:
NameTypeDescription
iInteger

(static) autoInit(root) → {Select}

Source:
Parameters:
NameTypeDescription
rootHTMLElement

DOM element for component instantiation and scope

Returns:

An instance of Select.

Type
Select

Events

onReset

Source:

onSearch

Source:

onSelectAll

Source:

onSelection

Source:

onToggle

Source: