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)”

Narayan G. Maharjan September 1, 2013 at 1:35 pm

Hi ralfh,
I would recommend you to get access the source code available at here.
https://blog.ngopal.com.np/2011/08/13/source-code-of-autofill-textbox-released/ .

It contains the demo test application where you can see the real way of using this control.

Thanks
Narayan
Narayan G. Maharjan September 1, 2013 at 2:08 pm

Please refer to comment #46
Balkrushn September 1, 2013 at 2:29 pm

But I dont know how to get value of text box when it is changed in MY CONTROLLER…plz cna you give me some code???
Narayan G. Maharjan September 2, 2013 at 1:23 pm

@Balkrushn,
Did you tried the .getTextField() it is the textbox instance . You can add listener to the textProperty of that TextField. It is pretty easier.

Thanks
Narayan
Balkrushn September 2, 2013 at 1:59 pm

@Narayan,
Thanx dude…I’ll try it…

Thanks,
Balkrushn
Narayan G. Maharjan September 2, 2013 at 2:00 pm

Anytime 😉
Agilan Palani September 8, 2013 at 3:50 pm

Narayan thanks for the control.
My requirement was to fetch the data from server as and when user types the text in the control.
I customized the control to take a call back handler, which user can use to fetch data from server. Additionally, I added feature to show display-text in the drop-down, instead of the actual value of the text-field. Wish to contribute back to you. Suggest me how.
Narayan G. Maharjan September 8, 2013 at 4:03 pm

Hi Agilan Palani,
Wow that’s great. I guess you can contribute it from this github repo https://github.com/privatejava/javafx-autocomplete-field. Please mail me to [email protected]. I would be glad for your contribution.

Thanks
Narayan
Agilan Palani September 9, 2013 at 8:41 pm

Emailed.
AbrahamFX September 19, 2013 at 10:17 pm

Thanks 😉
Himani October 17, 2013 at 12:49 pm

Hi..i am displaying the list of objects in textbox and on final selection by mouse i want to display that object. Please suggest on what method i should call my autofill text box to display object
Narayan G. Maharjan October 17, 2013 at 10:13 pm

Hi Himani,
I guess you are going to make the selection event and display that selected object somewhere. To listen the event of selection list you can make the .getListView().getSelectionModel().selectedItemProperty().addListener();

Thanks
beny November 11, 2013 at 9:13 pm

Hi Narayan,
where should i write this code excatly , when i want select a object from list ?

getListView().getSelectionModel().selectedItemProperty().addListener();
Narayan G. Maharjan November 12, 2013 at 2:09 pm

Hi beny,
Actually you can write those codes anywhere after the initialization of the autofill textbox object. The above code makes listening to the selection model of the ListView which is shown in the Autofill textbox while typing.
beny November 13, 2013 at 3:42 pm

Thanks for your answer ,Can I ask some questions , should I send them Facebook,twitter or by Mail ?
regis November 14, 2013 at 4:32 am

Ni Narayan
thanks a lot for this great work.

I would like to know if there is a way to filter or search a type containts instead of a type begins with ?
Thanks for anh help
beny November 15, 2013 at 2:37 am

How can i find all of the words,which they have (for example) ‘a’ ?
For example:
aaa
abc
dsa
ola
….
beny November 15, 2013 at 2:46 am

Hi Narayan, I have tried to change your code, but it wasn’t successful:P , How can i find all of the words,which they have (for example) ‘a’ in class AutofillTextBoxSkin ?
For example:
aaa
abc
dsa
ola
….
Rhadopsy December 10, 2013 at 7:04 pm

Hi everyone,

Your code is great, but with JavaFX 8, it does not work.
mehdi December 23, 2013 at 3:56 pm

Hi .

Thx for your work , is that a way to add this control in a fxml page ?
Narayan G. Maharjan December 29, 2013 at 10:38 am

If you have to add control in fxml page then there is already a demo of FXML implementation inside the source code : https://github.com/privatejava/javafx-autocomplete-field/blob/master/src/test/FXML.fxml#L9
Narayan G. Maharjan December 29, 2013 at 10:41 am

Well I have not tested yet! But I will push my updates on fx8 compatible soon : https://github.com/privatejava/javafx-autocomplete-field
Pravat December 30, 2013 at 10:44 pm

Hi Narayan,
Thanks for this custom control. I have an issue where in items added to the List does appear for the first time. For e.g – I have a keyPressEvent on the control and on key press, I take the value of the text box and add five values to the list. But these values does not appear in the list for the FIRST time. When I press backspace and press the same key again this value appears. Can you please let me know a workaround for this or am I doing it in the wrong way? Here is the handler code.

@FXML AutoFillTextBox itemAutoFill;
@FXML public void hadleAutoFillKeyReleased(KeyEvent ke) {

ObservableList data = itemAutoFill.getData();
String text = itemAutoFill.getText();
if(StringUtils.isNotBlank(text)) {
for(int i=0; i<5; i++) {
data.add(text + i);
}
}

}
Sandun April 3, 2014 at 8:46 pm

Hi Narayana,

Thanks for the post first.
I’m new to the JavaFX. I can’t imagine how to handle text change event.If you can provide code sample it will really help me.Thanks
Narayan G. Maharjan April 11, 2014 at 2:26 pm

Hi Sandun,
textProperty.addListener will help you very much or if you like to go for core then addEventFilter is useful.
padre.cedano June 9, 2014 at 6:10 am

Hi, not works for me in JavaFX 8. Error in AutoFillTextBoxBehavior and AutoFillTextBoxSkin files.
Antonello July 17, 2014 at 5:59 pm

Type your comment here

padre.cedano:

Hi, not works for me in JavaFX 8. Error in AutoFillTextBoxBehavior and AutoFillTextBoxSkin files.
Narayan G. Maharjan August 5, 2014 at 2:17 am

I am sorry for late response. I have just cleaned the code and pushed all new codes for JavaFX 8. Please check the blog post for more details.
padre.cedano August 5, 2014 at 10:46 am

Thanks! I find too an interesting projet: http://fxexperience.com/controlsfx/features/ that includes Autocomplete, and other features as Dialog Boxs.
I will test.
padre.cedano August 15, 2014 at 11:07 am

Hi I have two questions:
1. with a database as: id_city, city_name…
How i can show city_name and recuperate id_city?

2. How i can use autocomplete with @FXML textfields?

Thanks.
Sandip Hole October 4, 2014 at 1:08 pm

How can apply focus loss event to autofill textbox?
andre.java October 31, 2014 at 9:23 am

Hi,
Your autocomplete sounds great, but can’t get it to work.There’s something wrong with loading the skin , Failed to load skin ‘np.com.ngopal.control.AutoFillTextBoxSkin’ with exception java.lang.ClassCastException..Do you have any hints about this?
I’m runing with java 8.20.
Narayan G. Maharjan November 3, 2014 at 9:15 am

Try with [autoFillObj].getTextField().requestFocus();
Narayan G. Maharjan November 3, 2014 at 9:19 am

You can open this github project there is a test package . It will run without exception 🙂
https://github.com/privatejava/javafx-autocomplete-field. I suspect you have not added the jar file in your classpath
Jials November 3, 2014 at 8:54 pm

Hey! Great work there! By the way, is there anyway to activate this feature for the first word only?

And is it possible to activate it based on the input of first word, eg: only activate when the first word entered is “search”

Thanks!
Nagarajan November 6, 2014 at 12:25 am

Hi,

I am using table view. is it possible to use the autofill in the editable columns of tableview ?
Narayan G. Maharjan November 30, 2014 at 10:49 am

Yes you can do it , you can use them if you have customize cellrenderer
Sasmita December 3, 2014 at 1:11 am

Hi,

I want to use this component in my software which is commercial software.

So is any license required to use this.

Please Suggest.

Thanks and regards,
Sasmita.
Narayan G. Maharjan December 3, 2014 at 1:44 am

For this you can use the maven repository from http://maven-repository.com/artifact/np.com.ngopal/javafx-autocomplete-field/1.0.0
This has already been licensed with GNU .
Melwin Pinto December 3, 2014 at 3:36 pm

Hi,
I am javafx 8 when I import your javafx project I get error in Skin Base import line in AutoFillTextBoxSkin, If change it to com.sun.javafx.scene.control.SkinBase; then the whole program is filled with error, Pls Help me With this…
Sasmita December 4, 2014 at 12:39 am

Hi,

I am new in commercial license. So please clarify following points:
-How do I get the GNU license.
-Do I have to pay for it
-Can I extend the class and customize.

Please suggest,Your advice is valuable for me.

Thanks,
Sasmita
boyo January 7, 2015 at 8:52 pm

The component has major issues under jre8 update 40 – cannot delete editor text characters.
Narayan G. Maharjan January 9, 2015 at 7:05 pm

There is a github project for this : https://github.com/privatejava/javafx-autocomplete-field
Narayan G. Maharjan January 9, 2015 at 7:09 pm

Well until now jdk8u40 has not been released. I will look over the snapshot of that jdk and try that out.
Pingback: check
Naveen February 8, 2015 at 1:48 pm

I’m using this jar in my application. But the ListView is displaying only 5 values even though I have more values in the textbox.
TextBox.getData() is returning more than 5 values correctly. But in the UI it shows only 5 values. Please help.
nieze February 18, 2015 at 6:37 pm

how to set text changed event to the AutoFillTextBox ???
Anton Sirotinkin April 6, 2015 at 2:18 pm

1) First example. When I type first letter in TextBox, whole first word (starting from this letter) is inserting in TextBox, and cursor jumps to the end of word.
So to select any other word I can only use up/down arrows. Backspace doesn’t help (cause after erasing last letter autocompletion starts again and whole word restores)

Is it correct behaviour?
How to improve AutoFillTextBox so that it will be possible to type word letter, by letter ?
Anton Sirotinkin April 6, 2015 at 2:40 pm

When FilterMode is ON only odd (???) appear in textbox.

When I type first letter all is OK.
When I type second letter it doesn’t appear in text box, but in log I see:
[ve]
added one,added one,
1=1::1
1=1::1
Changed:[ver, verify_repo_blocking]

When I type third letter it appears in text box, but second disappear, in log:
[vr]

Changed:[]
Narayan G. Maharjan May 3, 2015 at 11:04 am

Filter mode is the process of filtering your list which can be displayble on any listview or other controls. But I am not sure this behaviour , can you checkout new source code available in github? -> https://github.com/privatejava/javafx-autocomplete-field

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