ComboBox

    ComboBox is a selection component allows selecting an item from a drop-down list. The component also has a text field area, which allows entering search text by which the items shown in the drop-down list are filtered. Common selection component features are described in “Selection Components”.

    The ComboBox Component

    ComboBox supports adding new items when the user presses Enter. See .

    ComboBox allows filtering the items available for selection in the drop-down list by the text entered in the input box.

    combobox filtering

    Pressing Enter will complete the item in the input box. Pressing Up and Down arrow keys can be used for selecting an item from the drop-down list. The drop-down list is paged and clicking on the scroll buttons will change to the next or previous page. The list selection can also be done with the arrow keys on the keyboard. The shown items are loaded from the server as needed, so the number of items held in the component can be quite large. The number of matching items is displayed by the drop-down list.

    Filtering is enabled by setting a filtering mode with setFilteringMode().

    Java

    See the on-line example.

    The modes defined in the FilteringMode enum are as follows:

    CONTAINS

    STARTSWITH

    Matches only items that begin with the given string.

    OFF (default)

    Filtering is by default off and all items are shown all the time.

    The above example uses the containment filter that matches to all items containing the input string. As shown in below, when we type some text in the input area, the drop-down list will show all the matching items.

    CSS Style Rules

    CSS

    2.   .v-filterselect-input { }
    5. .v-filterselect-suggestpopup { }
    6.   .popupContent { }
    8.     .v-filterselect-suggestmenu { }
    9.       .gwt-MenuItem { }
    10.     .v-filterselect-nextpage,
    11.     .v-filterselect-status { }

    The drop-down result list has an overall v-filterselect-suggestpopup style. It contains the list of suggestions with v-filterselect-suggestmenu style. When there are more items that fit in the menu, navigation buttons with v-filterselect-prevpage and v-filterselect-nextpage styles are shown. When they are not shown, the elements have -off suffix. The status bar in the bottom that shows the paging status has v-filterselect-status style.