Directory

← Back

searchbox

Search box component for Vaadin 8

Author

Rating

Popularity

100+

SearchBox component for Vaadin 8 helps performing searches and has autocomplete functionality.

The component is made of a search field (TextField) and a search button (Button). It supports autocompletion using the AutocompleteExtension add-on.

It is visually customisable, the button can be on either side of the text field or can be hidden. It can also be visually joined with the text field.

Several search modes are supported, the search can be performed on button click or ENTER key press, automatically on typing or when the typing finished.

Sample code

SearchBox searchBox = new SearchBox("Search", SearchBox.ButtonPosition.RIGHT);
searchBox.addSearchListener(e -> Notification.show(e.getSearchTerm()));
SearchBox searchBox = new SearchBox(VaadinIcons.SEARCH, SearchBox.ButtonPosition.LEFT);

// Set suggestion generator
searchBox.setSuggestionGenerator(this::suggestUsers);

// Show selected item
searchBox.addSearchListener(e -> Notification.show(e.getSelectedItem().toString()));

// ...

// The suggestion generator method that returns a list of suggestions
private List<String> suggestUsers(String query, int limit) {
    return DataSource.getUsers().stream().map(User::getName)
                    .filter(p -> p.contains(query))
                    .limit(cap).collect(Collectors.toList());
}
SearchBox searchBox = new SearchBox(VaadinIcons.SEARCH, SearchBox.ButtonPosition.RIGHT);

// Search listener
searchBox.addSearchListener(e -> Notification.show(e.getSearchTerm()));

// Search mode
searchBox.setSearchMode(SearchBox.SearchMode.DEBOUNCE);
searchBox.setDebounceTime(200);    // Search event fires 200 ms after typing stopped

// Suggestion generator
searchBox.setSuggestionGenerator(this::suggestUsers, this::convertValueUser, this::convertCaptionUser);

// ...

// The suggestion generator method. Returns a list of users.
private List<User> suggestUsers(String query, int limit) {
    return DataSource.getUsers().stream().filter(p -> p.contains(query))
                    .limit(cap).collect(Collectors.toList());
}

// Converts a User object into a String to be set as the value of the search field.
private String convertValueUser(DataSource.User user) {
    return user.getName();
}

// Converts a User object into an HTML string to be displayed as suggestion item
private String convertCaptionUser(DataSource.User user, String query) {
    return "<div class='suggestion-container'>"
            + "<img src='" + user.getPicture() + "' class='userimage'>"
            + "<span class='username'>"
            + user.getName().replaceAll("(?i)(" + query + ")", "<b>$1</b>")
            + "</span>"
            + "</div>";
}

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 nested optional when getting selected item from event
  • Included javadoc and sources
  • Updated Vaadin version to 8.4.0
Released
2018-05-09
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

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

searchbox - Vaadin Add-on Directory

Search box component for Vaadin 8 searchbox - Vaadin Add-on Directory
SearchBox component for Vaadin 8 helps performing searches and has autocomplete functionality. The component is made of a search field (TextField) and a search button (Button). It supports autocompletion using the [AutocompleteExtension](https://vaadin.com/directory#!addon/autocomplete-extension) add-on. It is visually customisable, the button can be on either side of the text field or can be hidden. It can also be visually joined with the text field. Several search modes are supported, the search can be performed on button click or ENTER key press, automatically on typing or when the typing finished.
Online