Vaadin23 access to search term entered to ComboBox from custom Renderer

Question

I implemented the custom Renderer for ComboBox items:

private Renderer<CompositeEntityResult> createRenderer() {

        StringBuilder tpl = new StringBuilder();

        tpl.append("<div style=\"display: flex;\">");
        tpl.append("  <div>");
        tpl.append("    <span ${item.name}</span>
...

comboBox.setRenderer(createRenderer());

Is it possible somehow to access the entered search term to ComboBox inside the renderer HTML markup? Also, what template engine is used for this markup?

UPDATED

private Renderer<CompositeEntityResult> createRenderer() {

        StringBuilder tpl = new StringBuilder();

        tpl.append("<div style=\"display: flex;\">");
        tpl.append("  <div>");
        tpl.append("    <span ${item.name}</span>
...

 return LitRenderer.<CompositeEntityResult>of(tpl.toString())
                .withProperty("name", e -> "< b>" + e.getName() + < /b>))

Right now it appears like a plain text in the ComboBox window, like <b>somename</b> but I'd like that 'somename' to be in bold instead.

This uses LitRenderer https://vaadin.com/docs/latest/components/combo-box/#custom-item-presentation There is no easy way to access the term. You would have to write JavaScript. What's your use case? — Simon Martinelli, Jul 31 '22 at 11:03
Thanks! I'd like to highlight the search term inside the text of ComboBox popup window — alexanoid, Jul 31 '22 at 11:09
That's easy you can call getValue on the ComboBox and check if it is the same as the item name. — Simon Martinelli, Jul 31 '22 at 11:11
gotcha! One more question - how can I pass markup tags inside the `${item.name}` value? — alexanoid, Jul 31 '22 at 11:16
Checkout the example https://vaadin.com/docs/latest/components/combo-box#custom-item-presentation — Simon Martinelli, Jul 31 '22 at 11:21
Also, I may type some text in ComboBox, but until I press Enter , the actual value of ComboBox will be null. Is there a way to get the entered text(not a value) from ComboBox? — alexanoid, Jul 31 '22 at 11:21
I apologize, maybe I was not clear. I'd like to pass the `item.name` variable like for example `"" +name + ""`. But `` tags right now appears like a plain text inside the ComboBox popup instead of bold style. How to correctly pass the tags there? — alexanoid, Jul 31 '22 at 11:28

Simon Martinelli · Accepted Answer · 2022-08-02T08:33:28.530

You have to use JavaScript to get the value before the user leaves the input field:

comboBox.getElement()
   .executeJs("return this.querySelector('input').value")
   .then(String.class, value -> { // use the value });

Answer to your second question:

private Renderer<CompositeEntityResult> createRenderer() {

    StringBuilder tpl = new StringBuilder();

    tpl.append("<div style=\"display: flex;\">");
    tpl.append("  <div>");
    tpl.append("    <span><b>${item.name}</b></span>
...

return LitRenderer.<CompositeEntityResult>of(tpl.toString())
            .withProperty("name", e -> e.getName() ))

Vaadin23 access to search term entered to ComboBox from custom Renderer

1 Answers1