javafx combobox editable autocomplete

Question

I have created a combo box which adds list of entries. I have made this combo box as editable and autocomplete. The issue is as follows

1)I selected the Arial value from the dropdown using mouseclick.

2)After that I typed black and from the result list I selected Arial Black using enter button.

3)Then again I clicked on Arial value using mouseclick ,the Arial value gets selected but along with it the result List is shown again even though i selected the value.

I want to hide the result list on click of mouse selection value. The result list is nothing but ComboBoxPopupControl. I tried using dispose method but it dint worked. Can anyone suggest the code on click of comboBox.setOnAction.

Here is the code

java.util.ArrayList;
import java.util.List;

import org.controlsfx.control.textfield.TextFields;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.event.EventType;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;

public class TestAutoTextSearch_bkp extends Application {

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        launch();

    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        List<String> countries = new ArrayList<>();
        countries.add("Arial");
        countries.add("Arial Black");
        countries.add("Arial Narrow");


        ComboBox<String> comboBox = new ComboBox();
        comboBox.getItems().addAll(countries);
        ComboBox<String> comboBox1 = new ComboBox();

        comboBox.setEditable(true);
        comboBox.setMaxWidth(Double.MAX_VALUE);






        comboBox.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                //Tried dispose method here but dint worked[![enter image description here][1]][1]


            }
        });

        comboBox.getEditor().setOnKeyPressed(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent ke) {
                 KeyCode kc = ke.getCode();
                System.out.println("Inside Key Press");
                 if ((kc.isLetterKey())||kc.isArrowKey()||kc.equals(KeyCode.BACK_SPACE)) {
                      TextFields.bindAutoCompletion(comboBox.getEditor(), comboBox.getItems());


            }}
        });








        Group root = new Group();
        root.getChildren().add(comboBox);

        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();

        comboBox.setMinWidth(comboBox.getWidth());
        comboBox.setPrefWidth(comboBox.getWidth());

    }

}

Answer 1

You can try 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 ...

ComboBoxCustomizer.create(comboBox)
                  .autocompleted(items)
                  .overrideToString(o -> "planet: " + o)
                  .multyColumn(o -> Arrays.asList("column 2", "column 3"))
                  .emphasized(o -> o.endsWith("s"))
                  .customize();