Suggestion Textfield

Hi

I want to have something like google search when the user presses some keys to list the values as google search.

Is there any component such as suggestionTextfield or something? If not how could I implement something like that? I have already done the searching part and now want to integrate with the textfield to list as a search.

There is the ComboBox component which automatically provides suggestions based on the current user input. These suggestions are drawn from the container data source of the ComboBox. For this to work, all possible suggestion items have to be loaded in the session.

If you want to have a suggestion feature that dynamically loads its data from some background storage, such as a database, you have to write your own component. The easiest approach to do that is to subclass ComboBox and adapt its implementation a bit. Please have a look at the following question on Stackoverflow which is about the same problem:
http://stackoverflow.com/questions/23340047/vaadin-7-combo-box-how-to-populate-and-dropdown-when-text-is-typed/

I wrote a small example application that demonstrates the feature requested in this question:

https://github.com/rolandkrueger/vaadin-by-example/tree/master/en/ui/SuggestingComboBox

I’m not sure if this is the best approach for this problem, but at least it works :slight_smile:

Hi, I am trying to add a suggestion textfiled into my application but I noticed that my combo box component doesnt have the drop down icon, can you please let me know how this could be added. It is very strange? This is all I added in the code.

ComboBox rentValues= new ComboBox();
    rentValues.setStyleName("drop-down-" +caption.replace(" ", "-").replace("(", "").replace(")", "").toLowerCase());
    rentValues.setNullSelectionAllowed(false);
    rentValues.setInputPrompt("Please select an option");
    rentValues.setFilteringMode(FilteringMode.CONTAINS);

    for (String item : propertyController.getRentValues()) {
        if (item != null) {
            rentValues.addItem(item);
        }
    }

18104.png