Module org.controlsfx.controls
Package org.controlsfx.control

Class SearchableComboBox<T>

  • All Implemented Interfaces:
    Styleable, EventTarget, Skinnable
    public class SearchableComboBox<T>
extends ComboBox<T>
    A simple extension of the ComboBox which shows a search field while the popup is showing. The user can type any text into this search field to filter the popup list.

    The user can type multiple words. The popup list is filtered checking if the string representation of an item contains all filter words (ignoring case).

    After filtering the list, the user can select an entry by

    • Pressing ENTER: the selected item is applied, the popup closes. If no item is selected, the first item is applied. To select another item the cursor keys can be used before pressing ENTER.
    • Pressing TAB: Same as ENTER, but in addition the focus is transferred to the next control.
    • Selecting an item using the mouse closes the popup.

    When pressing ESCAPE while the popup is showing, the item that was selected when the popup opened will be re-selected (even if the user did select another item using the cursor keys.

    Other than the ComboBox, the SearchableComboBox does open the Popup when using the cursor keys (the ComboBox does only change the selected item without opening the popup). This combined with the behavior of the ESCAPE key does allow to go through the list of items with the cursor keys and than press ESCAPE to revert the changes.

    Screenshot

    To better describe what a SearchableComboBox is, please refer to the pictures below:
    Screenshot of SearchableComboBox Screenshot of SearchableComboBox Screenshot of SearchableComboBox

    Example

    Let's look at an example to clarify this. The combo box offers the items ["Berlin", "Bern", "Munich", "Paris", "New York", "Alberta"]. The user now types "ber" into the search field. The combo box popup will only show ["Berlin", "Bern", "Alberta"].

    To select the first item ("Berlin"), the user can now either just press ENTER or TAB, or first select this item using the cursor DOWN key and press ENTER or TAB afterwards, or select this item using the mouse.

    To select the second or third item, the user either must use the cursor keys first, use the mouse, or type more text until the searched item is the first (or only) item in the list.

    If you want to modify an existing ComboBox you can set the skin to SearchableComboBoxSkin (e.g. using Control.setSkin(Skin) or in CSS.

    See Also:
    SearchableComboBoxSkin

    • Constructor Detail

      • SearchableComboBox

        public SearchableComboBox()

      • SearchableComboBox

        public SearchableComboBox​(ObservableList<T> items)