Client-side filtering for q-select

[svilupp]

Often you have too many options in your select() and want to allow the user to filter them out by typing the partial answer.

Behavior:

• Show all options for the select object
• User types "a"
• Filter options to only the ones containing "a"
• Re-render the options menu for the select object & repeat

@hhaensel has kindly provided this MWE that achieves the desired behavior:

using Stipple, Stipple.ReactiveTools, StippleUI

@appname Filtering

@app begin
    @in select = ""
    @out options = ["a", "b", "c"]
    @out options_all = ["a", "b", "c"]
    @onchange isready begin
        @info "I am alive!"
    end
    @onchange select begin
        @info "Selected: $selected"
    end
end

function ui()
    [
        h3("Select"), Stipple.select(
            :select,
            options = :options,
            label = "Pick X",
            clearable = true,
            useinput = true,
            @on(:filter, "filterFn")
        )
    ]
end

@methods begin
    """
    filterFn (val, update) {
        if (val === '') {
          update(() => {
            // reset to full option list
            this.options = this.options_all
          })
          return
        }

        update(() => {
            // filter down based on user provided input
          const needle = val.toLowerCase()
          this.options = this.options_all.filter(v => v.toLowerCase().indexOf(needle) > -1)
        })
    }
"""
end

@page("/", ui)

up(open_browser = true)

Note the macro "methods" behind used above to inject the new javascript function!

Tested on StippleUI.jl version 0.23.

Thank you, Genie team!