how to implement search hint?

[zillionare]

Usually to implement a search box with hint, you'll need a input box, and provide list property, then h5 input box will do the hint and autocomplete for you.

In h2o wave, I found I can use combobox to do the trick, the issue in my scenario is, we're going to prompt user from a list with length about 10k (or even more).

In a traditional b/s arch, we'll use ajax to pass user's partial input to server, then server do a fuzzy match, return result to select control, then prompt/hint is available. However, in h2o wave, seems like without refresh page/card, I'm not able to populate options property of select control. But if I re-draw the page/card, then user have to re-type same char to trigger prompt/hint, since re-draw the page/card cause the control lose former typed chars.

Any idea?

[mturoci]

This seems like a reasonable request considering AI/ML domain is known for large amounts of data. However, seems like there is currently no option that would provide as smooth UX as I would like. We might implement a dedicated ui.search component similar to ui.textbox, but with extended autocomplete options. The general mechanism would be something in the lines of our current paginated table. Wdyt @lo5 @mtanco ?

[lo5]

A dedicated search box would be good to have, but not sure what it has to do with the table. Unless you're proposing a search results component as well?

[mturoci]

Yes, searchbox with search suggestions. The mechanism could be:

1. Type into search.
2. Emit events to be handled.
3. Send down the proper suggestions.
4. Repeat.

[DeeJaayArgh]

This would be great feature to use for navigating in an app. Users are accustomed to navigating an app by typing the first few letters of where the want to go and then using autocomplete or the down arrow to select the destination.

[zillionare]

I have found how to implement type hint in my scenario - using a combobox, inject javascript to emit value change event to server when user is typing, then (most important) populate its choice prop, instead of re-draw the card. Updating prop, instead of re-draw the whole card, has been documented in the guide, I've just overlooked it.

in case someone else encountered same problem, here is the code:

// file: util.js
// this part provides common event bind and emit mechanism. 

function wave_emit(event_source, event_name, data_prop) {
    // data_prop: when the event is triggered, which property of the target will be submit? If undefined, then use e.data
    return function(e){
        if (data_prop){
            data = e.target[data_prop];
        }
        else{
            data = e.data
        }
        console.info("wave_emit", event_source, event_name, data);
        wave.emit(event_source, event_name, data);
    }
}

function bind_event(css_selector, event, callback) {
    el = document.querySelectorAll(css_selector);
    console.info("bind_event found el", el, css_selector)
    if (el.length > 0) {
        el.forEach(element => {
            element.addEventListener(event, callback);
        })
    }else{
        console.warn("bind_event failed: ", css_selector, event);
    }
}

in your view, implement page_script (which is js too) to do event binding:

symbol_input_selector = "[data-test=change_symbol] input"
page_script = f"""
    var selector = "{symbol_input_selector}";
    // we want to capture user's input here, so the event to listen is 'input'
    var event = "input";
   // server will receive event: change_symbol.on_symbol_hint, you can name it as anything at your will
    var callback = wave_emit("change_symbol", "on_symbol_hint", "value");
    
    // let the component listen to 'input' event
    bind_event(selector, event, callback);
    console.info("bind event to:", selector, event);
"""

then inject page_script, with utils.js into your view's meta:

def inlinejs(
    ps: str, requires: List[str] = None, targets: List[str] = None
) -> Component:

    global js
    return ui.inline_script(
        content=js + "\n" + ps,
        requires=requires,
        targets=targets,
    )

q.page["meta"] = ui.meta_card(
   script = inlinejs(page_script, targets=[symbol_input_selector])

then handle the event with

@on("change_symbol.on_symbol_hint")
async def prompot_symbol(q: Q):
    print(q.events.change_symbol.on_symbol_hint)