Directory

← Back

Autocomplete Extension

Autocomplete extension for TextField in Vaadin 8

Author

Rating

Popularity

100+

Autocomplete extension for TextField in Vaadin 8.

This extension adds autocomplete capability to the TextField component. Suggestions appear below the text field according to the user query and can be selected using the keyboard or mouse.

Suggestions can be any HTML making it possible to create complex visual representation such as icons, bold text etc.

Any Java object can represent a suggestion item and converters provide a caption (to be displayed on the UI) and value (to add to the text field) for each. This way it is possible to reuse the existing data that comes from the database.

NOTE: In order for the extension to work, the application's widget set needs to be rebuilt with the Vaadin plugin or with Maven.

Sample code

    TextField planetField = new TextField();

    // Apply extension and set suggestion generator
    AutocompleteExtension<String> planetExtension = new AutocompleteExtension<>(
            planetField);
    planetExtension.setSuggestionGenerator(this::suggestPlanet);

    // Notify when suggestion is selected
    planetExtension.addSuggestionSelectListener(event -> {
        event.getSelectedItem().ifPresent(Notification::show);
    });

    // ...

    // Suggestion generator function, returns a list of suggestions for a user query
    private List<String> suggestPlanet(String query, int cap) {
        return DataSource.getPlanets().stream().filter(p -> p.contains(query))
                .limit(cap).collect(Collectors.toList());
    }
        TextField userField = new TextField();
        userField.setWidth(250, Unit.PIXELS);

        AutocompleteExtension<DataSource.User> userSuggestion =
                new AutocompleteExtension<>(userField);
        userSuggestion.setSuggestionGenerator(
                this::suggestUsers,
                this::convertValueUser,
                this::convertCaptionUser);

    // ...

    private List<DataSource.User> suggestUsers(String query, int cap) {
        return DataSource.getUsers().stream()
                .filter(user -> user.getName().contains(query.toLowerCase()))
                .limit(cap).collect(Collectors.toList());
    }

    private String convertValueUser(DataSource.User user) {
        return WordUtils.capitalizeFully(user.getName(), ' ');
    }

    private String convertCaptionUser(DataSource.User user, String query) {
        return "<div class='suggestion-container'>"
                + "<img src='" + user.getPicture() + "' class='userimage'>"
                + "<span class='username'>"
                + WordUtils.capitalizeFully(user.getName(), ' ')
                .replaceAll("(?i)(" + query + ")", "<b>$1</b>")
                + "</span>"
                + "</div>";
    }

// ...

public class User {
    private String name;
    private String picture;

    public User(String name, String picture) {
        this.name = name;
        this.picture = picture;
    }

    public String getName() {
        return name;
    }

    public String getPicture() {
        return picture;
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Allows suggestions for empty field
  • Fixes width of full size field when extension applied
Released
2018-05-08
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Browser
Firefox
Opera
Safari
Google Chrome
Microsoft Edge

Autocomplete Extension - Vaadin Add-on Directory

Autocomplete extension for TextField in Vaadin 8 Autocomplete Extension - Vaadin Add-on Directory
Autocomplete extension for TextField in Vaadin 8. This extension adds autocomplete capability to the TextField component. Suggestions appear below the text field according to the user query and can be selected using the keyboard or mouse. Suggestions can be any HTML making it possible to create complex visual representation such as icons, bold text etc. Any Java object can represent a suggestion item and converters provide a caption (to be displayed on the UI) and value (to add to the text field) for each. This way it is possible to reuse the existing data that comes from the database. _NOTE:_ In order for the extension to work, the application's widget set needs to be rebuilt with the Vaadin plugin or with Maven.
Source Code
Online Demo
Issue Tracker

Autocomplete Extension version 0.1.1
null

Autocomplete Extension version 0.1.2
Fixed a bug that resulted in a client side exception when removing the text field component.

Autocomplete Extension version 0.1.3
Fire value change event right after a suggestion item is selected. Listen for these events with `textField.addValueChangeListener(...)`

Autocomplete Extension version 0.1.4
New API feature: `setSuggestionListSize(int)` for changing the maximum number of suggestions

Autocomplete Extension version 0.2.1
- Introduced suggestion select listener - Improved Valo-like styling - Refactored class paths, files moved under autocomplete subpackage - Rearranged dom elements and introduced wrapper around both text field and suggestion list

Autocomplete Extension version 0.2.2
Added API to programmatically trigger showing and hiding suggestion list

Autocomplete Extension version 0.2.3
- Updated to newest Vaadin version - Included sources and javadoc

Autocomplete Extension version 0.2.4
- Allows suggestions for empty field - Fixes width of full size field when extension applied

Online