創建JavaFX中一個自動完成搜索表單

Question

要獲得一個想法是什麼我想

當單擊該文本框，下拉列表將顯示帶有被過濾掉的文本字段中的用戶類型的建議。箱子的高度也應實時調整，以包含所有物品，或最多10個物品。

我設法使用ComboBox有點工作，但它感覺有點粗糙的邊緣，它似乎不可能做我想做的（下拉不會調整大小，除非你關閉它，打開它）。

新想法，有一個文本字段，然後顯示按鈕的VBox作爲下拉列表。唯一的問題是，我不知道如何定位下拉菜單，以便它保留在noral流中，以便覆蓋文本字段下的任何現有元素。有任何想法嗎？

編輯：

我最終設法弄清楚了。接受的答案仍然是更好的，但如果你有興趣我是如何做到的，然後在這裏它是：

https://gist.github.com/Alexzxcvbnm/c7a8ea192f0d6c4e6bf5213176bf94ae

Answer 1

你想要做什麼已經實施，包括在ControlsFx。它是開源的，我認爲它會適合你的需要。它看起來有些什麼像這樣

，你甚至可以添加自定義節點到它，這樣cross可得完成。

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); 
}