Auto complete Combobox

Question

I want to create auto complete editable combo box:

final ComboBox emailComboBox = new ComboBox();
        emailComboBox.getItems().addAll(
            "jacob.smith@example.com",
            "isabella.johnson@example.com",
            "ethan.williams@example.com",
            "emma.jones@example.com",
            "michael.brown@example.com"  
        );

Auto complete class:

public class AutoCompleteComboBoxListener<T> implements EventHandler<KeyEvent>
{

    private ComboBox comboBox;
    private StringBuilder sb;
    private ObservableList<T> data;
    private boolean moveCaretToPos = false;
    private int caretPos;

    public AutoCompleteComboBoxListener(final ComboBox comboBox)
    {
        this.comboBox = comboBox;
        sb = new StringBuilder();
        data = comboBox.getItems();

        this.comboBox.setEditable(true);
        this.comboBox.setOnKeyPressed(new EventHandler<KeyEvent>()
        {

            @Override
            public void handle(KeyEvent t)
            {
                comboBox.hide();
            }
        });
        this.comboBox.setOnKeyReleased(AutoCompleteComboBoxListener.this);
    }

    @Override
    public void handle(KeyEvent event)
    {
        ListView lv = ((ComboBoxListViewSkin) comboBox.getSkin()).getListView();

        if (event.getCode() == KeyCode.UP)
        {
            caretPos = -1;
            moveCaret(comboBox.getEditor().getText().length());
            return;
        }
        else if (event.getCode() == KeyCode.DOWN)
        {
            if (!comboBox.isShowing())
            {
                comboBox.show();
            }
            caretPos = -1;
            moveCaret(comboBox.getEditor().getText().length());
            return;
        }
        else if (event.getCode() == KeyCode.BACK_SPACE)
        {
            moveCaretToPos = true;
            caretPos = comboBox.getEditor().getCaretPosition();
        }
        else if (event.getCode() == KeyCode.DELETE)
        {
            moveCaretToPos = true;
            caretPos = comboBox.getEditor().getCaretPosition();
        }

        if (event.getCode() == KeyCode.RIGHT || event.getCode() == KeyCode.LEFT
            || event.isControlDown() || event.getCode() == KeyCode.HOME
            || event.getCode() == KeyCode.END || event.getCode() == KeyCode.TAB)
        {
            return;
        }

        ObservableList list = FXCollections.observableArrayList();
        for (int i = 0; i < data.size(); i++)
        {
            if (data.get(i).toString().toLowerCase().startsWith(
                AutoCompleteComboBoxListener.this.comboBox
                .getEditor().getText().toLowerCase()))
            {
                list.add(data.get(i));
            }
        }
        String t = comboBox.getEditor().getText();

        comboBox.setItems(list);
        comboBox.getEditor().setText(t);
        if (!moveCaretToPos)
        {
            caretPos = -1;
        }
        moveCaret(t.length());
        if (!list.isEmpty())
        {
            comboBox.show();
        }
    }

    private void moveCaret(int textLength)
    {
        if (caretPos == -1)
        {
            comboBox.getEditor().positionCaret(textLength);
        }
        else
        {
            comboBox.getEditor().positionCaret(caretPos);
        }
        moveCaretToPos = false;
    }

}


AutoCompleteComboBoxListener autoCompleteComboBoxListener = new AutoCompleteComboBoxListener(emailComboBox);


        grid.add(emailComboBox, 1, 9);

But when I want to insert the autocomplete combobox I get error:

incompatible types: AutoCompleteComboBoxListener cannot be converted to Node

Can you tell me how I can modify the code to return Node?

Answer 1

Solution from small utility library jalvafx

List<String> items = Arrays.asList("Mercury", 
                                   "Venus", 
                                   "Earth", 
                                   "Mars", 
                                   "Jupiter", 
                                   "Saturn", 
                                   "Neptune");

ComboBoxCustomizer.create(comboBox)
                  .autocompleted(items)
                  .customize();

By default, double click to clear value.

There are some other usefull features. You can add extra columns or glyphs, single out specific items, change items default toString representation ...

Answer 2

Auto Fill text box in Filter mode see this example and source code for auto fill Auto Fill Text box example

Auto Fill text box source code:Source Code