ComboBox

ComboBox

Creates a new HTML element that unites the features of the input, select- and the datalist-element.
The control provides a few additional features:

  • assigning the list as string or string array
  • adding new entries to the list if property 'extendable' is set to 'true'
  • setting the length of the displayed dropdown list
  • displaying the list sorted or unsorted

Constructor

new ComboBox()

Source:
Version:
  • 1.2.0
Examples
<COMBO-BOX extendable 
           size="8" 
           options="United States, Germany, United Kingdom"
           placeholder="-- select a country --">
</COMBO-BOX>// creates a new ComboBox element with these attributes:

// - extendable  - new items can be added to the list
// - size = "8"  - if expanded, the list displays max. 8 items without scrollbar
// - options     - this is the list to be displayed when dropped
// - placeholder - shows a placeholder, when the INPUT field is empty
const combo = new ComboBox();
combo.options = ['Germany','United Kingdom','Panama','Netherlands','Portugal','Italy'];
combo.size = 8; // display 8 list items max. (default = 6)
combo.addListItem('Mexico'); // add a new item to the list
combo.removeListItem(2); // removes the second item (='Panama') from list
combo.value = 'Egypt'; // set the value of the ComboBox. If not in list it can be added!

Members

(static) disabled :Boolean

getter | setter
Returns or sets the control's disabled state. true | false

Source:
Type:
  • Boolean

(static) extendable :Boolean

getter | setter
true | false
Returns or determines whether the dropdown list can be extended by new entries or not.
If property is true or the corresponding HTML attribute is set,
a new entry can be added by pressing the ENTER key or clicking the + symbol
that appears on the right side of the control.

Source:
Type:
  • Boolean

(static) isDropped :Boolean

getter | setter
true | false
Tells us, if the dropdown list is open or closed and toggles the arrow button on the right side.
Toggles the open attribute in HTML.

Source:
Type:
  • Boolean

(static) name :String

getter | setter
Returns or sets the name attribute of the element.

Source:
Type:
  • String

(static, readonly) observedAttributes :Array.<String>

getter
Returns a list of all attributes to be observed.
Any attribute contained in this list will trigger the attributeChangedCallback method.

Source:
See:
  • attributeChangedCallback
Type:
  • Array.<String>

(static) options :String|String.<Array>

getter | setter
Returns or assigns the displayed list items.
Returns null if list is empty.

Source:
Type:
  • String | String.<Array>

(static) placeholder :String

getter | setter
Supplies the placeholder attribute to the internal input field.

Source:
Type:
  • String

(static, readonly) properties :String.<Array>

getter
Returns an array of all getters and setters of this class.
If only getters are wanted, the code must be changed from:
...=> typeof descriptor.set === 'function' TO: ...=> typeof descriptor.get === 'function'

Source:
See:
Type:
  • String.<Array>

(static) size :Number

getter | setter
Returns or determines the count of displayed list items in the dropdown list.
Default value is 6.

Source:
Type:
  • Number

(static) sorted :Boolean

getter | setter
Returns or determines if the displayed dropdown list is sorted or not.
true | false

Source:
Type:
  • Boolean

(static) type :String

getter | setter
Determines whether the ComboBox works as a simple dropdown list or if it provides the full new functionality.
The type may contain one of these values:

  • combo (default)
  • list
Source:
Type:
  • String

(static) value :String

getter | setter
Returns or set's the value of the ComboBox.

Source:
Type:
  • String

Methods

addListItem(item)

Description:

  • Adds a new entry to the list if the extendable attribute is set to true.
    If the list is expanded it will be collapsed after adding it.

Source:
See:
  • extendable
Parameters:
Name Type Description
item Event | String | Number

item to be added to the dropdown list.

attributeChangedCallback(attrName, oldVal, newVal)

Description:

  • This method is called when an attribute has been changed, is new assigned
    or right after the component is connected to the DOM.
    The attribute must be listed in the observedAttributes property.
    If the attribute's value has not been changed, the method has no effect.

Source:
See:
Example
<COMBO-BOX name="surname"></COMBO-BOX> // setting the 'name' attribute to an element would trigger this method.
Parameters:
Name Type Description
attrName string

name of the changed attribute.
oldVal any

old value of the attribute.
newVal any

new value of the attribute.

collapse()

Description:

  • Closes the dropdown list and set's the flag isDropped to false.

Source:

expand(optionsopt)

Description:

  • Shows the dropdown list.
    The method is called either by click on the arrow button or by making an input into the INPUT field.

Source:
Parameters:
Name Type Attributes Description
options String | String.<Array> <optional>

String array of options to be displayed in the dropdown list.
If omitted, the current assigned item list is going to be displayed.

removeListItem(item)

Description:

  • Removes an existing list item from the options.

Source:
Parameters:
Name Type Description
item Event | String | Number

list item to be removed.

showIcon(type)

Description:

  • Enables or disables either the dropdown arrow or the plus symbol.

Source:
Parameters:
Name Type Description
type String | Boolean

The icon to be displayed or disabled.

  • 'arrow' - the dropdown icon is displayed
  • 'plus' - displays the plus icon to indicate that an item can be added to the list
  • 'none' | false - disables all icons (i.e. when the list is empty)