Directory

← Back

AutocompleteTextField Add-on

A Vaadin TextField with autocomplete (aka word completion) functionality

Author

Contributors

Rating

Support

If you experience problems using this add-on file an issue on github.com.

The rating section is no place for questions.

Also please be aware that giving 0/5 stars on a review because you have a question harms this add-on and does not encourage me to help you.

Features

TextField features

You can use all the features of the normal Vaadin TextField. At least the ones I'm aware of ;-).

This includes:

  • Text change events
  • Data binding

Extended suggestion attributes

Every suggestion can be extended by a description and an icon

Fluent API

This add-on provides an API with fluent setters, following the example of viritin.

License & Author

Add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.

AutocompleteTextField is written by Max Schuster

autoComplete was originally developed by Simon Steinberger and is released under the MIT License.

Sample code

Collection<String> theJavas = Arrays.asList(new String[] {
    "Java",
    "JavaScript",
    "Join Java",
    "JavaFX Script"
});

AutocompleteSuggestionProvider suggestionProvider = new CollectionSuggestionProvider(theJavas, MatchMode.CONTAINS, true, Locale.US);

AutocompleteTextField field = new AutocompleteTextField();

// ===============================
// Available configuration options
// ===============================
field.setCache(true) // Client side should cache suggestions
field.setDelay(150) // Delay before sending a query to the server
field.setItemAsHtml(false) // Suggestions contain html formating. If true, make sure that the html is save to use!
field.setMinChars(3) // The required value length to trigger a query
field.setScrollBehavior(ScrollBehavior.NONE) // The method that should be used to compensate scrolling of the page
field.setSuggestionLimit(0) // The max amount of suggestions send to the client. If the limit is >= 0 no limit is applied

field.setSuggestionProvider(suggestionProvider);
field.addTextChangeListener(e -> {
    String text = "Text changed to: " + e.getText();
    Notification.show(text, Notification.Type.TRAY_NOTIFICATION);
});
field.addValueChangeListener(e -> {
    String text = "Value changed to: " + e.getProperty().getValue();
    Notification notification = new Notification(
            text, Notification.Type.TRAY_NOTIFICATION);
    notification.setPosition(Position.BOTTOM_LEFT);
    notification.show(Page.getCurrent());
});

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

  • Fixed #16 getValue() on the field is not returning the selected value
  • Added #8 Ability to add suggestion select listener
Released
2017-08-07
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.4+ in 1.0-alpha-4
Browser
Firefox
Opera
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Online