Directory

searchbox

Search box component for Vaadin 8

View larger

Close

View larger

Close

View larger

Close

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>";
}

Links

• Online Demo
• Issue Tracker
• Source Code

Compatibility