Autocomplete Extension
Autocomplete extension for TextField in Vaadin 8
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; } }
Links
Compatibility
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