Фильтрация пунктов

Введите текст в меню выбора, чтобы отфильтровать доступные пункты.

Для фильтрации пунктов в меню выбора необходимо добавить код JavaScript на стороне клиента, который будет выполнять фильтрацию каждый раз, когда пользователь вводит новую букву в текстовом поле. В этом примере следует обратить внимание на следующие моменты.

Фильтрация пунктов выполняется в браузере с помощью метода filterFn, определенного посредством макроса @methods. Этот макрос внедряет код JavaScript в браузер.
Реактивные переменные, помеченные как @in или @out, отображаются в браузере как переменные JavaScript. В браузере они содержатся в структуре Main_App_varMain_App_ReactiveModel. Эту структуру можно изучить в браузере с помощью инструментов разработчика в консоли.

module App
using GenieFramework

@genietools

@app begin
    @out full_listofnames = ["Henry", "HenryJames", "Mark", "Jenny"]
    @out listofnames = ["Henry", "HenryJames", "Mark", "Jenny"]
    @in selected_name = ""
    @in startlist_button = false

    @onbutton startlist_button begin
        listofnames = vcat(listofnames, ["Henry", "Mark", "Jenny"])
    end
end

@methods begin
    """
filterFn: function(val, update, abort) {
      if (val === '') {
          update(() => {
            Main_App_varMain_App_ReactiveModel.listofnames = Main_App_varMain_App_ReactiveModel.full_listofnames

          })
          return
        }
        update(() => {
          const needle = val.toLowerCase()
          Main_App_varMain_App_ReactiveModel.listofnames = Main_App_varMain_App_ReactiveModel.full_listofnames.filter(v => v.toLowerCase().indexOf(needle) > -1)
        })
      }
"""

end

function ui()
    [
    column([
        btn("Start list", @click(:startlist_button), size = "20px"),
        select(:selected_name, options=:listofnames, emitvalue=true, clearable=true, useinput=true, counter = true, fillinput=true, filled = true, label="TraceID", var"@filter"="filterFn")
        ])
    ]
end
@page("/",ui)
end