Updated: AutoFill TextBox with FilterMode in Javafx 2.0 (Custom Control)

by Narayan G. Maharjan
July 4, 2011December 3, 2014
121 Comments

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

AutoFill Textbox on item selection with keys.
Filter Mode

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.

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&lt;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();

    }
}

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)

.autofill-text {
    -fx-skin: "np.com.ngopal.control.AutoFillTextBoxSkin";
}

.autofill-text {

-fx-skin: "np.com.ngopal.control.AutoFillTextBoxSkin";

}

Output

AutoFill TextBox

2. Filter Mode

You can easily set the Filter Mode on/off by using setFilterMode(boolean filter) . Let’s see the example of this FilterMode.

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&lt;String&gt; 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&lt;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();

    }
}

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

Tags:autofill control custom filtermode in JavaFX textbox

121 thoughts on “Updated: AutoFill TextBox with FilterMode in Javafx 2.0 (Custom Control)”

Anatol July 4, 2011 at 7:21 am

Hello! Tnx for useful post!

What’s a pity that I caught some errors on my configuration ( build32 x64 )

WARNING: com.sun.javafx.css.StyleManager$2 run Resource “null” not found.
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for AutoFillTextBox@78d59861[styleClass=autofill-text]
WARNING: com.sun.javafx.css.StyleManager$2 run Resource “null” not found.
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for AutoFillTextBox@78d59861[styleClass=autofill-text]
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for AutoFillTextBox@78d59861[styleClass=autofill-text]
WARNING: com.sun.javafx.css.StyleManager$2 run Resource “null” not found.
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for AutoFillTextBox@78d59861[styleClass=autofill-text]

🙁
If you ever met such behaviour, pleeease, would you make it clear for me?
Narayan Gopal Maharjan July 4, 2011 at 6:25 pm

Hello Anatol,
Those WARNINGS are occured because you are using old Netbeans JavaFX 2.0 plugins .
Some of my recommendation:
>Please use new one.
>Or you can also start new Java Project not JavaFX project and add two jars(AutoFillTextBox.jar and jfxrt.jar) as library.
>Ensure that you have created and linked a css with contents as shown on above control.css

Thanks.
Anatol July 5, 2011 at 11:28 pm

Thanks!

It works via Java-project ( not without some roughnesses, but works )

May I suggest little improvement from my side of view? 🙂

I used
//
hbox.setAlignment(Pos.CENTER);
//

and removed manual “translateXProperty()” for label

So, both nodes well aligned by HBox itself.

P.S.

When one items in list selected by mouse, list become empty. Is it by design?
Pingback: Java desktop links of the week, July 11 | Jonathan Giles
Michael July 13, 2011 at 2:33 pm

Nice idea but on Windows 7, JDK 1.6u26, JavaFX 2.0 b34
I get a NPE when I type in a second letter in your first example.
So typing an “a” shows the output as shown here but when I then type “p” i get a NPE. I’d expected an updated list with all word starting with “ap”.
Michael
Narayan Gopal Maharjan July 13, 2011 at 6:31 pm

Hi Michael,
You can send me details on [email protected]
Narayan Gopal Maharjan July 14, 2011 at 11:31 pm

Hi Michael,

I’ve uploaded new jar please try with that jar.

Thanks.
Pingback: Source Code of AutoFill TextBox Released « Java and FX
Ricardo September 23, 2011 at 8:10 pm

Thanks a lot!
I extended the AutoFillTextBoxSkin and did a litle change.
I need search for any part of the strings instead of just on the start.

I like it so much!
Thank you!
jimmy October 13, 2011 at 4:45 pm

could you help me please…. provide the tutorial using your code. I cant understand what is Java Fx and how to use it…?

please… i need your help. Thanks
Narayan Gopal Maharjan October 14, 2011 at 6:34 pm

You can know more about javafx at here: javafx.com
To get started with javafx programming goto : http://download.oracle.com/javafx/2.0/get_started/jfxpub-get_started.htm
Svuksic November 4, 2011 at 7:54 pm

Hello it seems like a good and useful control but i got error: java.lang.ClassNotFoundException: javafx.scene.control.TextBox

Are you sure that in JFX 2.0 exist TextBox control or I missed something?
Could you help me?
Narayan Gopal Maharjan November 4, 2011 at 8:20 pm

Hello this post was posted during beta release of javafx. So the TextBox is deprecated in current release. I’ll update this post in this week. But if you really want to implement this control then this post is very helpful. Because the source code of here are compatible with new one. https://blog.ngopal.com.np/2011/08/13/source-code-of-autofill-textbox-released/
Svuksic November 4, 2011 at 10:44 pm

I saw that you replace textbox with textfield. I have built yours source project and added jar file as librari to my project and now have new error:
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for AutoFillTextBox@8608b9[styleClass=autofill-text]

Do you know where is problem? Sorry for lot of questions but I just stuck on this control but I really like it and I want use it in my project.
Narayan Gopal Maharjan November 5, 2011 at 4:27 pm

I think you have not set the CSS class for the control. as shown in blog
Svuksic November 5, 2011 at 6:39 pm

I don’t know where is problem, I’ll wait for yours release of control.
When I builded yours project I got warning: AutoFillTextBoxSkin.java uses or overrides a deprecated API maybe is problem in this.
Narayan Gopal Maharjan November 5, 2011 at 10:17 pm

I think you are using some other approach. Please make a new project on Netbeans using javafxrt.jar as library and run the code. This will definetly work because it is working for me. You can give me your computer spec for solving your problem.
Svuksic November 8, 2011 at 4:13 am

I opened yours project in Netbeans, to libraries add jfxrt library and started clean and build command. I got error :
warning: [options] bootstrap class path not set in conjunction with -source 1.6
Note: C:\AutoFillTextBox\src\np\com\ngopal\control\AutoFillTextBoxSkin.java uses or overrides a deprecated API.
After that add AutoFillTextBox.jar as library to my project.
Did you mean this as computer specification?
installed: JavaFX 2.0.1 SDK and Netbeans 7.1 beta.
Ajesh Baby May 2, 2012 at 2:12 pm

Great work. Is it support other Locale and Unicode.
Narayan G. Maharjan May 4, 2012 at 11:04 pm

I’ve not tried with the Unicodes. But I think it should work.
Pingback: JavaFX Drag and Drop Cell in ListView « Java and FX
Amol May 17, 2012 at 2:35 pm

Dear Narayan ,
First of all thanks for posting your efforts 🙂
However, please let me know how to use/intigrate the custom component created in java into FXML.?
Thanks and Regards,
Amol
Narayan G. Maharjan May 17, 2012 at 6:25 pm

Hi Amol,
I didn’t understand the “custom component in java”. Do you mean the swing/awt custom component? or the custom component of the javafx
Firstly if you want to include the control of the javafx in fxml then you just need to import the control in your fxml file.
Suppose: I’ve the autofill Textbox(np.com.ngopal.control.AutoFillTextBox) control to be added in the fxml then you just only need to import them in fxml like this.
<?import np.com.ngopal.autocomplete.* ?> <AutoFillTextBox fx:id="filterPerson" prefWidth="200"/>

But if you are talking of adding the swing custom control then i think it’s probably little bit harder Hint: JFXPanel

Thanks
Narayan
Arati June 14, 2012 at 6:55 pm

Hi Narayan,
I am getting the following error. Please help me out to solve this.
SEVERE: javafx.scene.control.Control loadSkinClass Failed to load skin ‘StringProperty [bean: AutoFillTextBox@193722c[styleClass=autofill-text], name: skinClassName, value: np.com.ngopal.control.AutoFillTextBoxSkin]’ for control AutoFillTextBox@193722c[styleClass=autofill-text]
java.lang.ClassNotFoundException: np.com.ngopal.control.AutoFillTextBoxSkin
at java.net.URLClassLoader$1.run(URLClassLoader.java:202)
Narayan G. Maharjan June 14, 2012 at 7:00 pm

Hi Arati,

It seems that you have not added the css for your project.Like this
{code}
.autofill-text {
-fx-skin: “np.com.ngopal.control.AutoFillTextBoxSkin”;
}
{code}

Thanks
laptop Website July 13, 2012 at 9:30 am

Great information. Lucky me I recently found your blog by chance (stumbleupon).
I have saved it for later!
Pingback: S.African factory output unexpectedly higher in May | Times and Democrat Newspaper
Raj October 9, 2012 at 2:59 pm

Dear all,
I am trying to make my own control like level, button and make it a jar file and then use this control in my another application for drag and drop in canvas using javaFX2.1 or Netbean7.2 project.
kindlly help me and send me some sample of the same project.
Thanks in advance
Raj Kumar Mandal
Udayan Kumar December 5, 2012 at 11:39 am

Dear Narayan,

I need to display both code & description (two column list) in auto-complete field. but if user selected a value need to display description in text box & keep the code value in back ground. Could you pls give me a suggestion to achieve this scenario.
Thanks.
Narayan G. Maharjan December 5, 2012 at 4:44 pm

Hi Udayan,
The list pops in the autofill textbox are based on the ListView Control. If you need to customize the listcell then you can directly get the ListView object from getListView() of this control function and change the cell factory as per you like. All the source code of this control is open sourced at here
Pradeep January 12, 2013 at 6:58 pm

Hi, Thank you for such a useful control. I am creating a small utility app and have used your autocompletextfield. I was able to add it to my app but now I am facing two small problems.

1) I want to increase the prefHeight to 30.0, but when I am doing that its not getting reflected there.
2)The control is not getting focused when I travel using tab.
Please help.
Thanks in advance
Narayan G. Maharjan January 15, 2013 at 6:19 pm

@Pradeep
1- To set the height of the textfield you can try with minHeight.
2- To focus the textfield you need to use explicit “requestFocus()” function which helps to focus the textfield.

Thanks
Pradeep January 15, 2013 at 11:54 pm

Hi
I have tried what you said but unfortunately its not working. Neither the height of the control is increasing nor the requestFocus() gives focus to the control when tab is pressed.
Narayan G. Maharjan January 18, 2013 at 1:47 pm

Hi Pradeep,
I am sorry for late response but was really busy in last couple of days. I have updated the source code and now it supports the “Tab” and also it supports for the Width and height fixing . Thanks for your comment.

-Narayan
Cristiano January 28, 2013 at 2:52 am

Hi Narayan,

I’ve tried to integrete your AutoFillTextBox in my fxml () but it’s not working. At runtime i receive this exception java.lang.InstantiationException: np.com.ngopal.control.AutoFillTextBox

any idea?

thanks in advance,
Cristiano
Narayan G. Maharjan January 28, 2013 at 12:17 pm

Hi Cristiano,
I have updated the jar file and source codes. Please head towards the source code of the Autofill Text Box (https://blog.ngopal.com.np/2011/08/13/source-code-of-autofill-textbox-released/) it has the source demo of FXML as well.

Thanks
Narayan
Pradeep January 31, 2013 at 12:13 pm

Hi,
Thanks for the source code. Its working now:)
Pradeep February 1, 2013 at 7:00 pm

Faced with another problem today. When I press space and then start typing, it throws null pointer exception.
Jayesh February 2, 2013 at 4:47 pm

i am having problem that when i run the app. Textfield is not visible. please help
Narayan G. Maharjan February 2, 2013 at 9:27 pm

Hi Jayesh,
Did you try exact direction like on the blog ? Also I would like you to have a snap at “Source Code of AutoFill” it contains the demo example using this control.

Thanks
Sylo February 12, 2013 at 5:20 pm

Hi Narayan

First of all i wanna thank you for that great component. It helped me a lot.

My question is about the logging. Is there any way to disable this feature?

Greets
Sylo
Narayan G. Maharjan February 12, 2013 at 5:24 pm

Hi Sylo,
Currently there are some “system.out” line in the control which i need to delete but didn’t get much time. Anyway you can grab directly source code from here 🙂
https://blog.ngopal.com.np/2011/08/13/source-code-of-autofill-textbox-released/

Thanks
Chukse February 25, 2013 at 10:52 pm

Hi Narayan, Is there a way we can have dynamic list (say on auto-suggest, get the data from the web service dynamically) of data instead of static list (predefined set of input given at the time of initialization)? The work you have done is pretty good. help is greatly appreciated.

Thanks
Narayan G. Maharjan February 26, 2013 at 12:18 am

Hi, @Chukse
um..for that i think you need to update the “items” observable list every time the user types any text . It is different than my control but yes it is useful. I think you can hack over my control source and do some tweaks to work. Moreover you need to do some callback function for any text type and loading icon as well.

Thanks
Narayan
Vaisakh June 6, 2013 at 1:20 pm

Can I add this suggestion box within the cell of a Tableview in javafx? Please help me with this.
Thanks in advance.
Narayan G. Maharjan June 7, 2013 at 8:08 pm

Yes you can ,use cellfactory of Tablecolumn for making your customized cell.
diet products June 15, 2013 at 3:27 pm

That is a good tip especially to those new to the blogosphere.
Brief but very precise information… Many thanks for sharing this one.
A must read article!
Ralfh Ansuattigui August 22, 2013 at 10:57 pm

Hi Narayan,

i’ve been looking for a autofilling/autocomplete combobox to finish a tiny work here and got very pleased to find your AutofillTextBox. I’m a java beginner and therefore everything still seems too complex for me. Thanks a lot for sharing a so simple and so effective solution.
Ralfh Ansuattigui August 23, 2013 at 8:19 pm

Dear Narayan,
after implementing your class i was receiving an error message about not loading the control.css even though there was nothing wrong with it. I discovered that the observablelist i’ve set to the object contained null positions so i had to change the query to eliminate them. Is there any way of eliminating the problem on your code?
Thanks in advance.
Balkrushn September 1, 2013 at 1:15 pm

I want value of autocomplete box in my controller when it changes. How can I get it??? plz help me….

Updated: AutoFill TextBox with FilterMode in Javafx 2.0 (Custom Control)

Share this:

121 thoughts on “Updated: AutoFill TextBox with FilterMode in Javafx 2.0 (Custom Control)”

Leave a Reply Cancel reply