在javafx中创建自动填充搜索表单

Question

了解我想要的东西

单击文本字段时，将显示下拉列表，其中包含在用户在文本字段中键入时过滤掉的建议。盒子的高度也应该实时调整，以包含所有项目，或最多10项。

我设法使用ComboBox让它有点工作，但它感觉有点粗糙的边缘，它似乎不可能做我想要的（下拉列表不会调整大小，除非你关闭它并重新打开它）。

新想法，有一个文本字段然后显示按钮的VBox作为下拉列表。唯一的问题是我不知道如何定位下拉列表以使其保持在noral流中，因此它可以覆盖文本字段下方的任何现有元素。有什么想法吗？

Answer 1

您尝试做的事情已经实施，并且已包含在ControlsFx中。它是开源的，我认为它适合你的需要。它看起来像这样

您甚至可以向其添加自定义节点，以便{I}也可以完成。{/ p>

Answer 2

请考虑这个示例，您可以理解并将其应用到您的项目中。

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class SearchFormJavaFX  extends Application{

    @Override
    public void start(Stage ps) throws Exception {
        String[] options = {"How do I get a passport",
                            "How do I delete my Facebook Account",
                            "How can I change my password",
                            "How do I write some code in my question :D"}; 

        // note that you don't need to stick to these types of containers, it's just an example
        StackPane root = new StackPane();
        GridPane container = new GridPane();
        HBox searchBox = new HBox();

        ////////////////////////////////////////////////////

        TextField text = new TextField(); 

        // add a listener to listen to the changes in the text field
        text.textProperty().addListener((observable, oldValue, newValue) -> {
            if(container.getChildren().size()>1){ // if already contains a drop-down menu -> remove it 
                container.getChildren().remove(1);
            }
            container.add(populateDropDownMenu(newValue, options),0,1); // then add the populated drop-down menu to the second row in the grid pane
        });

        // those buttons just for example
        // note that you can add action listeners to them ..etc
        Button close = new Button("X");
        Button search = new Button("Search");
        searchBox.getChildren().addAll(text,close,search);


        /////////////////////////////////////////////////

        // add the search box to first row
        container.add(searchBox, 0, 0);
        // the colors in all containers only for example
        container.setBackground(new Background(new BackgroundFill(Color.GRAY, null,null)));
        ////////////////////////////////////////////////

        root.getChildren().add(container);

        Scene scene = new Scene(root, 225,300);
        ps.setScene(scene);
        ps.show();


    }


    // this method searches for a given text in an array of Strings (i.e. the options)
    // then returns a VBox containing all matches
    public static VBox populateDropDownMenu(String text, String[] options){
        VBox dropDownMenu = new VBox();
        dropDownMenu.setBackground(new Background(new BackgroundFill(Color.GREEN, null,null))); // colors just for example
        dropDownMenu.setAlignment(Pos.CENTER); // all these are optional and up to you

        for(String option : options){ // loop through every String in the array
            // if the given text is not empty and doesn't consists of spaces only, as well as it's a part of one (or more) of the options
            if(!text.replace(" ", "").isEmpty() && option.toUpperCase().contains(text.toUpperCase())){ 
                Label label = new Label(option); // create a label and set the text 
                // you can add listener to the label here if you want
                // your user to be able to click on the options in the drop-down menu
                dropDownMenu.getChildren().add(label); // add the label to the VBox
            }
        }

        return dropDownMenu; // at the end return the VBox (i.e. drop-down menu)
    }



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

}

Answer 3

public void pushEmails(TextField Receptient) {
    ArrayList<CustomTextField> list = new ArrayList<>();

    for (int i = 0; i < Sendemails.size(); i++) {
        CustomTextField logo=new CustomTextField(Sendemails.get(i));
        ImageView logoView=new ImageView(new Image("/Images/Gmail.png"));
        logo.setRight(logoView);
        list.add(logo);
    }

    TextFields.bindAutoCompletion(Receptient, list);
}