Updated on Dec 4, 2014: Published in Maven Repository javafx-autocomplete-field
Updated on Aug 5, 2014: Fixed code for JavaFX 8 [Github Repo]
Hello After working some couple of days on Javafx 2.0 Custom Control. I came to the final result of my Custom Control. The Custom Control which I’m going to tell you is about “Auto-Fill TextBox” . This control consists of two major controls they are TextBox and ListView with a Popup where Listview is embedded.
Features of this textbox
Let’s start these features one by one. To start using this control you can first download the Jar package or see Documentation first.
How to get Started
First download the jar file ‘AutoFillTextBox.jar’ from here. Then add the jar file to the Library of your current JavaFX Project where you want to implement this control. (PLEASE ADD jfxrt.jar ALSO TO YOUR PROJECT LIBRARY).
Now Let’s start the coding phase . On coding we’ll be working with the features presented in TextBox.
1. AutoFill Textbox on item selection with keys.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
package test; import np.com.ngopal.control.AutoFillTextBox; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.HBox; import javafx.stage.Stage; /** * * @author Narayan G. Maharjan * @see <a href="https://blog.ngopal.com.np"> Blog </a> */ public class ControlTest extends Application { /** * @param args the command line arguments */ public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("AutoFillTextBox without FilterMode"); //SAMPLE DATA ObservableList data = FXCollections.observableArrayList(); String[] s = new String[]{"apple","ball","cat","doll","elephant", "fight","georgeous","height","ice","jug", "aplogize","bank","call","done","ego", "finger","giant","hollow","internet","jumbo", "kilo","lion","for","length","primary","stage", "scene","zoo","jumble","auto","text", "root","box","items","hip-hop","himalaya","nepal", "kathmandu","kirtipur","everest","buddha","epic","hotel"}; for(int j=0; j<s.length; j++){ data.add(s[j]); } //Layout HBox hbox = new HBox(); hbox.setSpacing(10); //CustomControl final AutoFillTextBox box = new AutoFillTextBox(data); //Label Label l = new Label("AutoFillTextBox: "); l.translateYProperty().set(5); l.translateXProperty().set(5); hbox.getChildren().addAll(l,box); Scene scene = new Scene(hbox,300,200); primaryStage.setScene(scene); scene.getStylesheets().add(getClass().getResource("control.css").toExternalForm()); primaryStage.show(); } } |
CSS(control.css)
|
1 2 3 |
.autofill-text { -fx-skin: "np.com.ngopal.control.AutoFillTextBoxSkin"; } |
Output
AutoFill TextBox
You can easily set the Filter Mode on/off by using setFilterMode(boolean filter) . Let’s see the example of this FilterMode.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
package test; import np.com.ngopal.control.AutoFillTextBox; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.ListView; import javafx.scene.layout.VBox; import javafx.stage.Stage; /** * * @author Narayan G. Maharjan * @see <a href="https://blog.ngopal.com.np"> Blog </a> */ public class ControlTest extends Application { /** * @param args the command line arguments */ public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("AutoFillTextBox without FilterMode"); //SAMPLE DATA ObservableList<String> data = FXCollections.observableArrayList(); String[] s = new String[]{"apple","ball","cat","doll","elephant", "fight","georgeous","height","ice","jug", "aplogize","bank","call","done","ego", "finger","giant","hollow","internet","jumbo", "kilo","lion","for","length","primary","stage", "scene","zoo","jumble","auto","text", "root","box","items","hip-hop","himalaya","nepal", "kathmandu","kirtipur","everest","buddha","epic","hotel"}; for(int j=0; j<s.length; j++){ data.add(s[j]); } //Layout VBox vbox = new VBox(); vbox.setSpacing(10); //CustomControl final AutoFillTextBox box = new AutoFillTextBox(data); box.setListLimit(10); box.setFilterMode(true); box.getListview().setVisible(false); //Here we are using external Listview instead of AutoFillTextBox's ListView list = new ListView(); list.itemsProperty().bind(box.getListview().itemsProperty()); //Label Label l = new Label("AutoFillTextBox: (Filter Mode 'ON')"); l.translateYProperty().set(5); l.translateXProperty().set(5); vbox.getChildren().addAll(l,box,list); Scene scene = new Scene(vbox,300,200); primaryStage.setScene(scene); scene.getStylesheets().add(getClass().getResource("control.css").toExternalForm()); primaryStage.show(); } } |
CSS is just same as of previous example
Output:
FilterMode on AutoFillTextBox usage
Thanks for watching this blog. If you have any queries then please comment without hesitation.
Have a š good day.
For changelog you can see at top of the post
use method getTextBox() that is the instance of textfield of javafx control
Hi, I try to use your AutoFillTextBox in my application but i have a problem.
When i pressed a key like (‘a’ for example), the textfield auto select aplogize in the list. If i pressed ‘au’ the items on the list are good (just auto) but the textfield was autocompleted by ‘aplogize’.
do have an idea ?
I don’t know where the probleme is and i would like a textField no autocompleted with a listview filtered.
thx Maxime.
there is a setFilterMode() method where you can easily manage the filter functionality instead of autocompleting the text
The same problem I faced like Maxime and next is when I press back button, then text will not be deleted completely. I tried setFilterMode () method also but I didn’t get a proper auto compete text field how can I do
When i run the code, i get an error at line 59, the line with control.css.
what can i do!?
Did you try new version of autocomplete from github https://github.com/privatejava/javafx-autocomplete-field
Pingback: AutoComplete ComboBox in JavaFX - BlogoSfera
Hi i have issue as
java.lang.NoSuchMethodError: com.sun.javafx.scene.control.behavior.BehaviorBase.(Ljavafx/scene/control/Control;)V
at np.com.ngopal.control.AutoFillTextBoxBehavior.(AutoFillTextBoxBehavior.java:14)
and 14 line is
public AutoFillTextBoxBehavior(AutoFillTextBox textBox) {
super(textBox);
}
Hi Jay, Did you try the new build from the git repo : https://github.com/privatejava/javafx-autocomplete-field
Hi,
I tried to use your jar the same way you described it in “2. Filter mode”.
However, when I write down a letter, it automatically writes the first element of the list in the search box. Is there any way to turn that off?
Moreover, if I try to delete a research I made form the box, I will not work either..
You jar is sick and would be perfect for my app but I cannot manage to make it work properly… That’s very frustrating.
Thank you in advance!
Hi JV,
if you like to change behaviour you can change from the source code . Please pull over the source code and you can edit as you like : https://github.com/privatejava/javafx-autocomplete-field
Hey,
got a nullpointer at line 382 in AutoFIllTextBoxSkin when you start you input with space.
you have to check first if listView.getItems() != null
if (listview.getItems() != null && listview.getItems().containsAll(list)
&& listview.getItems().size() == list.size())
fix’d it for me
Hi, I tried to change the size of the TextBox because it’s too small but it didn’t work, how can I do that?
Hi Mr. Narayan G. Maharjan,
Can this be integrated with the SCENE BUILDER? if so can you show us how.
Hoping for your reply.
Thank you.
Did you add the jar inside scene builder as library jar ?
Change the width value of getTextField()
Thank you for you’re reply Mr. Narayan G. Maharjan,
Iv’e already added the jar in the scene builder and in the project library what i’m confused with is how to include the initialization of the:
final AutoFillTextBox box = new AutoFillTextBox(data);
to
Parent root = FXMLLoader.load(getClass().getResource(“Login.fxml”));
What i’m trying to do is when the user types in the login text box it shows the suggested username.
I’m very sorry, i’m still new to java/javafx. Hope that you can help me understand how to use your code. š
Thank you in advance.
Hi got it to work in scene builder by following your “TEST” Project folder with the source code and as what iv’e read in the comments the same problem does occur when typing a keyword it automatically suggest that word then when pressing backspace the program produces an error.
Do you have any work around with this?
Thanks in advance. Great work btw. š
Hi.
I want to use JfxTextfield instead of AutoFillTextBox because I like the skin of jfxTextfiled and I want to have this in my project. Also I want to change the skin of AutoFillTextBox. How can I do these jobs?
Thanks
You might want to clone the git repository as it is open sourced already – https://github.com/privatejava/javafx-autocomplete-field
Pingback: Java desktop links of the week, August 15 – Jonathan Giles