过滤选择选项

要过滤选择菜单中的选项，您需要添加一些客户端 Javascript，以便在用户在文本字段中输入新字母时执行过滤。本例中需要注意的事项

选项过滤是通过使用 @methods 宏定义的`filterFn` 方法在浏览器中执行的。该宏将 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