TypeAheadComponent

This component class manages the configuration of a TypeAheadComponent and does the rendering.

The corresponding typeAhead function creates such a component. It offers the possibility to input some String and get some list of proposals to choose from. Internally this is achieved by adding some datalist to the input field (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist).

It is intentional that this component is built upon a built-in mechanism of HTML: Even if there is no way to style the choices list, it will work on any device out of the box, especially on mobiles, where the native selection methods differ extremely from the desktop browsers!

The proposals adapt dynamically to the current user input, so it is mandating to provide a function that gets the current string (it is called "draft" throughout this component) and returns a List of Strings as proposals. As this function should be easy to integrate with other fritz2's methodologies, the parameter and the return value are wrapped with a Flow. Have a look at Proposal for signature details.

The typical (and minimal) usage might look like this:

val proposals = listOf("Kotlin", "Scala", "Java", "OCaml", "Haskell").asProposals()
val choice = storeOf("")
typeAhead(value = choice, items = proposals) { }

For production UIs consider a really long static list of possibilities. For the above example it would be much better to use a selectField instead! Choose a typeAhead if the possibilities are too long for a select component that displays all possibilities at once, or if the possibilities are gathered from an external source, like a remote API.

The configuration deals basically with three big groups:

• the options for forms basic behaviours (enabled, disabled and readonly)

• the options for visual appearance (variant, size and placeholder) that are typical for the internal used InputFieldComponent

• the options for manipulate the behaviour of getting or accepting the proposals (value, strict, limit, draftThreshold and debounce)

We focus on the latter ones in the examples:

// handle the events manually if separation of source and destination flow is needed:
val proposals = listOf("Kotlin", "Scala", "Java", "OCaml", "Clojure", "F#").asProposals()

val preselection = storeOf("Clojure")
val choice = storeOf("")
typeAhead(items = proposals) {
    value(preselection.data)
    events {
        value handledBy choice.update
    }
}

// enable to accept also none proposal input values:
// this mode resembles a web search: the user gets proposals, but can freely type and commit new Strings if
// no suggestion fits:
typeAhead(value = choice, items = proposals) {
    strict(false) // `true` is default
}

// limit the proposal list: Show at maximum 5 first entries of the proposals list
typeAhead(value = choice, items = proposals) {
    limit(5) // `20` is default
}

// set a threshold of minimum string size of a draft, so below this no proposals are generated
// this is especially useful if it is clear, that the smallest proposal is longer in size and there are
// so many results, a longer start value before searching improves the selectivity.
typeAhead(value = choice, items = proposals) {
    draftThreshold(3) // start searching only after input of at least 3 chars; `1` is default
}

// react to typing speed or "cost" of a remote call: Change the timeout the component will wait with a new
// execution of the `items` function to fetch new proposals after last key stroke:
typeAhead(value = choice, items = /* some costly remote call */) {
     debounce(1000) // wait one second in this case; `250` (ms) is default
 }