ComboBox

The ComboBox control is simple and powerful. These are the main properties of the ComboBox:

itemsSource
Gets or sets an array or an ICollectionView that contains the items to display.
displayMemberPath
If the items from the itemsSource are objects (as opposed to strings), use this property to specify which property of the items to display in the ComboBox.
text
Gets or sets the text in the control. Use this property to collect text that the user enters or selects.
selectedIndex
Gets or sets the index of the currently selected item in the itemsSource.
selectedItem
Gets or sets currently selected item in the itemsSource.
isEditable
Gets or sets whether the user can type values that are not in the itemsSource.

The itemsSource and displayMemberPath properties are responsible for populating the option list. They are mainly input properties. The text, selectedItem, and selectedIndex properties change to reflect user input. They are mainly output properties.

These samples use the WjComboBox component and Angular 2.

The table below contains a regular input element and some ComboBox controls, with and without drop-down items. Try typing the names of some countries. As you type, the ComboBox automatically completes the entry. You can use the up and down keys to select the previous or next item that matches the text you typed.

Notice how the list of items automatically positions above or below the control to fit the available space. Notice also how you can customize the control appearance using regular CSS.

Description
Live Control
Bound Value
Regular input element
{{country1}}
Regular input element, styled
{{country1}}
ComboBox with no items
{{country1}}
Array source, editable
{{country2}}
Array source, editable, styled
{{country2}}
Array source, non-editable
{{country3}}
Array source, non-editable, styled
{{country3}}
CollectionView source, editable
{{item1}}, ID: {{cmb1.selectedItem?.id}}
CollectionView source, non-editable
{{item2}}, ID: {{cmb2.selectedItem?.id}}
CollectionView in a grid
HTML content