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
Autocomplete Extension - Vaadin Add-on Directory
Autocomplete extension for TextField in Vaadin 8Online 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