过滤选择选项
要过滤选择菜单中的选项,您需要添加一些客户端 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