ComboBox inputListener missing

General
1

Hi i need a kind of ComboBox mit input listener, but dont have an idea how to.

The user must be able to enter a word into a combobox and upon 3 letters, it must start a search in the database for matching items which then must be set to the ComboBox as chooseable values.

Am i right, that a ComboBox doesnt have this behaviour out of the box? Does anyone has an idea how to get this done?

2

Have you tried listening to the “input” event using an element dom event listener added to the cb (in java)?

https://cdn.vaadin.com/vaadin-web-components/24.9.2/#/elements/vaadin-combo-box#event-input

There is also a filter-changed event, but not sure when this will be fired, never tried that before

1 Like
3

interesting idea, thank you. I have tried

searchInput.getElement()
                .addEventListener("filter-changed", e -> {
                    String typed = e.getEventData().getString("element.filter");
                    if (typed != null && typed.length() >= 3) {
                        System.out.println("Suche nach: " + typed);
                    } else {
                        searchInput.setItems(Collections.emptyList());
                    }
                })
                .addEventData("element.filter");

This prints the entered value, looks good. Will try now add the database to it. ChatGPT recommended a Dataprovider with filter. Maybe also worth a look, but it looks quite more complicated for this use case.

4

It’s rare for me to say, but ChatGPT is right. DataProvider with a filter should be used. The implementation is really simple and no JavaScript hacks are necessary.

5

Delegating it to the data provider might even a better idea, simply did not pop-up in my mind :slight_smile:

The data provider should be notified by the CB on filter change and could then, depending on the length of the string, return data or not (if length < 3).

6

Could resolve it with this approach:

        searchInput.setItems(query -> {
            int offset = query.getOffset();
            int limit = query.getLimit();

            String filter = query.getFilter().orElse("").trim();
            if (filter.length() < 3) {
                return Stream.<MyDto>empty();
            }
            return mydtoService
                    .findCustomer(filter, referer, offset, limit)
                    .stream();
        });

Any (performance-) improvement suggested?

7

Usability: it feels weird that you don’t allow people to see the available values without a filter applied

8

Thanks for the feedback. In this case there are tons of data which needs to be loaded (the itemRenderer generates a div with user data, and more related data). Loading all those data would be a big overload, thats why we go this way with “you need to enter at least 3 letters”.

The user also knows, what he is looking for. He definetely knows for example the name of the user he is looking for. So the intend is, why laoding all Mr. Miller, if the user knows he looks for Mr. Smith :)

9

Not quite, but almost. You can do this by using backend data provider instead. The callback gets Query object as a parameter, and that has the Filter value populated. That is the same as the input value. So you do not need to set input listener. You can just implement the callback so that it does not return items before there are at least three characters in the filter value. And naturally then you implement your service query so that it can use the filter value accordingly. So your code is step to right direction.

1 Like