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

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

  1. AutoFill Textbox on item selection with keys.
  2. 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.

CSS(control.css)

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.

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

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

  1. 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 [email protected][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 [email protected][styleClass=autofill-text]
    SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for [email protected][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 [email protected][styleClass=autofill-text]

    ๐Ÿ™
    If you ever met such behaviour, pleeease, would you make it clear for me?

  2. Narayan Gopal Maharjan

    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.

  3. 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?

  4. Pingback: Java desktop links of the week, July 11 | Jonathan Giles

  5. 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

  6. Pingback: Source Code of AutoFill TextBox Released « Java and FX

  7. 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!

  8. 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

  9. 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?

  10. 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 [email protected][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.

  11. 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.

  12. Narayan Gopal Maharjan

    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.

  13. 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.

  14. Pingback: JavaFX Drag and Drop Cell in ListView « Java and FX

  15. 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

  16. 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

  17. 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: [email protected][styleClass=autofill-text], name: skinClassName, value: np.com.ngopal.control.AutoFillTextBoxSkin]’ for control [email protected][styleClass=autofill-text]
    java.lang.ClassNotFoundException: np.com.ngopal.control.AutoFillTextBoxSkin
    at java.net.URLClassLoader$1.run(URLClassLoader.java:202)

  18. Pingback: S.African factory output unexpectedly higher in May | Times and Democrat Newspaper

  19. 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

  20. 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.

  21. 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

  22. 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

  23. @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

  24. 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.

  25. 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

  26. 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

  27. Faced with another problem today. When I press space and then start typing, it throws null pointer exception.

  28. 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

  29. 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

  30. 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

  31. 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!

  32. 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.

  33. 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.

Leave a Reply