How to Implement an Autocomplete Feature in a JavaFX ComboBox

Question

How can I implement an autocomplete feature in a JavaFX ComboBox?

Answer

Implementing an autocomplete feature in a JavaFX ComboBox allows users to filter options dynamically while also being able to view the entire list of items easily. This guide will walk you through creating a ComboBox that filters its contents based on user input, but also displays all items when the dropdown is opened.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import java.util.ArrayList;
import java.util.List;

public class AutoCompleteComboBox extends Application {
    @Override
    public void start(Stage primaryStage) {
        ComboBox<String> comboBox = new ComboBox<>();
        List<String> items = new ArrayList<>();
        items.add("Apple");
        items.add("Banana");
        items.add("Cherry");
        items.add("Date");
        items.add("Elderberry");
        items.add("Fig");
        items.add("Grape");

        comboBox.getItems().addAll(items);
        comboBox.setEditable(true);

        comboBox.setOnKeyReleased(event -> {
            String input = comboBox.getEditor().getText();
            comboBox.getItems().clear();
            items.stream()
                .filter(item -> item.toLowerCase().startsWith(input.toLowerCase()))
                .forEach(comboBox.getItems()::add);

            if (input.isEmpty()) {
                comboBox.getItems().addAll(items);
            }
        });

        VBox vbox = new VBox(comboBox);
        Scene scene = new Scene(vbox, 300, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
} 

// This code creates an editable ComboBox that filters items based on user input.

Causes

Difficulty in dynamically filtering ComboBox items based on user input.
Requirement for an editable ComboBox that shows all options when clicked without typing.

Solutions

Implement a custom filter for the ComboBox items based on the text input.
Use a listener to handle input changes and update the ComboBox items accordingly.
Override the ComboBox's behavior to ensure all items are shown when the dropdown is opened.

Common Mistakes

Mistake: Not adding items back to the ComboBox when input is cleared.

Solution: Ensure to add all items back to the ComboBox when the input field is empty.

Mistake: Not handling case sensitivity in item filtering.

Solution: Convert both the input and items to lowercase when comparing for filtering.

Helpers

JavaFX ComboBox autocomplete
JavaFX editable ComboBox
JavaFX filtering ComboBox items
JavaFX UI components
JavaFX ComboBox example