ComboBox No Autocomplete Result Listener

Flow
1

Hi,

i have a ComboBox (Adresses) with 400items. I like to implement a listener that triggers if the user searches with autocomplete for an item that not exists in the ComboBox. Then there should be a warning under the ComboBox that the user needs to add the new Adress to the Database before he can use it here. ComboBox does not have a emptyAutoCompleteResultListener :D. Any solution or idea how to tackle my Problem ?

2

Didn’t try myself, but the custom value listener comes here into my mind. But for that, the user has to “enter” the filter value, so not sure if it really helps

1 Like
3

You could however also use Javascript to solve the issue by

  1. adding a listener to the CB’s input field, that triggers a check on the “input” event
  2. the check then scans the CB’s overlay for any non hidden item element.
  3. If there is none, then it fires a custom event, that you can listen to on the server side

Something like

comboBox.getElement().executeJs("""
this.inputElement.addEventListener("input", e => {
    if(this._overlayElement.querySelectorAll("vaadin-combo-box-item:not([hidden])").length === 0) {     
        this.dispatchEvent(new CustomEvent("empty-filter"));
    }
});
""");
comboBox.getElement().addDomEventListener("empty-filter", event -> ...)

*edit: updated sample

4

I would suggest another way:

  • Implement a custom Data Provider where you have the Query / Filter information
  • If your Data Provider returns no matching items → toggle button
1 Like
5

@Stefan.27 , but I do not get it now. The Custom value event should be the same.

6

Additional clarification note to my two suggesions, since I am not 100% sure, what you meant with “user searches”:

  1. the custom value change listener comes in handy, when “searches” means, that the user has to submit something first before the CB reacts, like hitting Enter
  2. the client side “item visibility check” immediately reacts on any user input and thus would show a warning without having the user submitting the value
7

Sorry for that.

If you type(search) something in a ComboBox you will get, if there a any matches, the result in the list below the ComboBox.

If we have a ComboBox with 4 items (Earth, Moon, Mars and Venus) and you typ “Ea” you will get only “Earth” in the list below cause its the only thing that matches on you input. If you write “Eam” nothing matches so the list below is empty.

So if the list is empty i wanna do something. For exampble.
1 ) Bring a Notification that no item exits that matches
2) Open a Dialog where the user can add the item to the Database behind the ComboBox