This new web component unites the functionality of the common HTML-elements <INPUT>, <SELECT> and <DATALIST> and extends it by some new features.
You can add a list of options to the control. This list can be dropped down or collapsed by clicking the arrow on the right side. This way the control works like a common select element.
The control also can be used like an input element. In difference to this one, the dropdown list will be expanded, as long as a containing list item matches to the input.
If the input does not match to any list item, a plus icon will appear on the right side of the control in order to indicate that a new entry can be added. This behaviour can be enabled or disabled by the extendable attribute.
By click on the plus icon or pressing the enter key while the icon is visible, the new input will be added to the list and the icon disappears.
This behaviour differs from the common datalist HTML-element.
The control supports all other global <INPUT>-tag related HTML attributes. A value can be assigned either by the HTML value attribute or by the JavaScript .value property.
The component is form-associated, so that it can be used in common <FORM>-elements and submits it's current value to the connected name attribute.
To verify this behaviour, select an entry from the list or make an input and press the submit button. The submitted values will be displayed in the browser's adress bar.
All attributes are also accessable by JavaScript via the corresponding properties.
In JavaScript the items of the dropdown list can be also assigned as an array.
The method .addListItem allows to add single items to the list later, while the .removeListItem method removes an existing item from the list. It can be called either by click on the cross on the right side of the list item, or external. In that case an argument is required to determine which item is supposed to be removed. The argument can be numeric (meaning the index) or a string, that means the item itself.
For detailed information see the full documentation of the combobox.
const combo = document.getElementById('myComboBox');
combo.type = 'combo'; // default! If set to 'list', the control works like a dropdown list
combo.options = 'Germany, United Kingdom, Panama, Netherlands, Portugal, Italy, Greece, Poland, United States, France, Peru';
// options can also be assigned as an array:
// combo.options = ['Germany','United Kingdom','Panama','Netherlands', ...]
combo.size = 8; // default = 6
combo.extendable = true;
combo.sorted = true;
combo.value = 'Egypt';
combo.addListItem('Mexico');
combo.removeListItem(2); // removes the second item (='Panama') from list
| Attribute | Description | HTML Example |
|---|---|---|
| type | Determines wether the Combobox works as a simple dropdown list (type="list") or if it provides the full new functionality below. By default the type is set to combo. | <combo-box type="list"></combo-box> |
| options | Provides the list of items in the dropdown list. In JavaScript the list can also be assigned as array. | <combo-box options="Germany,Italy,France"></combo-box> |
| size | Determines the length of the shown items, when the list is dropped down. Default is 6. | <combo-box size="8"></combo-box> |
| extendable | A boolean attribute that determines if a new, unknown entry can be added to the list when the ENTER-key is hit. Also an existing item can be removed by clicking on the cross at the right side of the list item. If the attribute is present, it is considered to be true, otherwise as false. To indicate a new entry can be added, a plus sign shows up at the right side of the control, which can be clicked with the same effect. | <combo-box extendable></combo-box> |
| sorted | Boolean attribute that determines wether the list is sorted or not. | <combo-box sorted></combo-box> |
| value | With the value attribute you can set or read the control's value. If the value is not in the list, the plus icon will be displayed to indecate it can be added to the list. | <combo-box value="Egypt"></combo-box> |