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

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

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

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

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

    getListView().getSelectionModel().selectedItemProperty().addListener();

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

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

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

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

    }

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

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

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

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

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

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

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

  17. Pingback: check

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

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

  20. 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:[]

Leave a Reply