Select

Select

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

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:
Name Type Description
element HTMLElement

DOM element for component instantiation and scope
options Object
Properties
Name Type Description
defaultText String

The default placeholder
searchText String

The label for search
selectAllText String

The label for select all
selectMultipleSelector String

The data attribute selector of the select multiple
defaultTextAttribute String

The data attribute for the default placeholder text
searchTextAttribute String

The data attribute for the default search text
selectAllTextAttribute String

The data attribute for the select all text
noResultsTextAttribute String

The data attribute for the no results options text
closeLabelAttribute String

The data attribute for the close button
clearAllLabelAttribute String

The data attribute for the clear all button
selectMultiplesSelectionCountSelector String

The selector for the counter of selected options
closeButtonLabel String

The label of the close button
clearAllButtonLabel String

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:
Name Type Description
e Event
Fires:

handleClickOption(e)

Description:

  • Event callback to handle the click on a checkbox.

Source:
Parameters:
Name Type Description
e Event

handleClickOutside(e)

Description:

  • Event callback to handle the click outside the select.

Source:
Parameters:
Name Type Description
e Event

handleClickSelectAll(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event
Fires:

handleEsc(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event

handleFocusout(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event

handleKeyboardOnClearAll(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event
Fires:

handleKeyboardOnClose(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event

handleKeyboardOnOption(e)

Description:

  • Event callback to handle the click on an option.

Source:
Parameters:
Name Type Description
e Event

handleKeyboardOnOptions(e)

Description:

  • Event callback to handle keyboard events on the dropdown.

Source:
Parameters:
Name Type Description
e Event

handleKeyboardOnSearch(e)

Description:

  • Event callback to handle keyboard events

Source:
Parameters:
Name Type Description
e Event

handleKeyboardOnSelect(e)

Description:

  • Event callback to handle keyboard events on the select.

Source:
Parameters:
Name Type Description
e Event

handleKeyboardOnSelectAll(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event

handleSearch(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event
Fires:

handleToggle(e)

Description:

  • Event callback to show/hide the dropdown

Source:
Parameters:
Name Type Description
e Event
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:
Name Type Description
eventName string

The name of the event to listen for.
callback function

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:
Name Type Attributes Default Description
values string | Array.<string>

A string or an array of values or labels to set as selected.
op string <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:
Name Type Description
eventName string

The name of the event to trigger.
eventData any

Data associated with the event.

update(i)

Description:

  • Update instance.

Source:
Parameters:
Name Type Description
i Integer

(static) autoInit(root) → {Select}

Source:
Parameters:
Name Type Description
root HTMLElement

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: