autocomplete in vaadin?

Question

I'm new to vaadin. How do I do autocomplete (actually, more like google suggest) on a huge set of data that cannot be loaded in memory, but instead performing a JPA query on every key event. Is it possible to capture key events on a textfield or combobox?

Overvalue

You may want to only start your autocomplete feature after 3 or so letters have been entered (if possible), so that you don't get a huge list returned. And not display the full set of suggestions to the user. Just some general thoughts on autocomplete. – Roadstead

jtechnoprojects.blogspot.com/2011/08/… – Safir

Answer 1

You could check out Henrik Paul's SuperImmediateTextField, which is a Vaadin add-on that allows you to set the client-to-server post delay in seconds. From that on it's common Java stack to get the flow as smooth as possible. Caching, JPA requests or something else. A couple of second's delay will at least slightly lessen the load to server side.

Psoriasis

Answer 2

If you don't want to write a custom client-side widget or include another add-on, you can tweak Vaadin's ComboBox a bit to make it load suggestions from the database. You basically have to do three things to achieve that:

1. Subclass com.vaadin.ui.ComboBox and overwrite its protected method ComboBox#buildFilter() with your own implementation.
2. Implement interface com.vaadin.data.Container.Filter with very restricted functionality: your Filter only needs to transport the current user input.
3. Write an implementation of com.vaadin.data.Container that performs the actual filter logic.

I described how to do that in more detail in a blog post.

Burrill

Answer 3

Vaadin auto-complete add-on is available to achieve this. check this out:-https://vaadin.com/directory/component/autocomplete

Example below:

   Autocomplete autocomplete = new Autocomplete();

    autocomplete.setLimit(5);

    autocomplete.addChangeListener(event -> {
        String text = event.getValue();
        autocomplete.setOptions(findOptions(text));
    });

    autocomplete.addChangeListener(event -> {
        refreshContent(event.getValue());
    });

    autocomplete.addValueClearListener(event -> {
        peopleGrid.setItems(Collections.EMPTY_LIST);
    });

    autocomplete.setLabel("Find what you want:");
    autocomplete.setPlaceholder("search ...");

Complete code below : https://github.com/vaadin-component-factory/autocomplete/blob/master/autocomplete-demo/src/main/java/com/vaadin/componentfactory/demo/AutocompleteView.java#L132

Cervix

Answer 4

You may find this link helpful. I guess this is getting fixed in 6.5. There is also an addon if you want to check.

you need to consider this though

field value -> json -> vaadin servlet -> service (spring/ejb/pojo or whatever) -> JPA -> query -> result list (which may be huge initially)

and this all the way back to browser for every key press...

think about the end user's typing speed. By the time 1st keystroke's response comes back from the server, user might have completed the whole word.

Biography

Answer 5

The instant TextField should be what you are looking for. Take a look at the Sampler demo: http://demo.vaadin.com/sampler/#TextFieldTextChangeEvent

Actinoid

Answer 6

maybe checkout this addon: https://vaadin.com/directory#!addon/suggestbox-add-on

comes with:

delay for server communication, e.g. wait till user finished typing for n miliseconds

placeholder text like 'type your query here'

minimum length for input to query the server

Burnsides