Filtered List
A text field which filters a scrollable list of names while you type.

package main
import (
"slices"
"strings"
"go.wdy.de/nago/application"
"go.wdy.de/nago/presentation/core"
. "go.wdy.de/nago/presentation/ui"
"go.wdy.de/nago/web/vuejs"
)
func main() {
names := []string{"Anna", "Ben", "Clara", "David", "Emma", "Felix", "Greta", "Hannah", "Ian", "Julia", "Karl", "Lena", "Mia", "Noah", "Oskar", "Paula", "Quentin", "Rosa", "Samuel", "Tina", "Uwe", "Vera", "Willi", "Xenia", "Yara", "Zoe", "Adrian", "Bianca", "Chris", "Diana", "Elena", "Fabian", "Gustav", "Helena", "Isabel", "Jonas", "Klara", "Levi", "Mara", "Nico", "Oliver", "Pia", "Rafael", "Sara", "Tim", "Ulrike", "Valentin", "Wanda", "Xaver", "Yvonne", "Aaron", "Bruno", "Celine", "Dominik", "Eva", "Franz", "Gina", "Henry", "Inga", "Jannis", "Kilian", "Lara", "Matteo", "Nina", "Olivier", "Petra", "Rico", "Selina", "Tobias", "Udo", "Vanessa", "Walter", "Ximena", "Yusuf", "Zara", "Alina", "Bastian", "Carla", "Dennis", "Elisa", "Fiona", "Georg", "Helge", "Ilona", "Jule", "Konrad", "Lukas", "Milan", "Nora", "Otto", "Philipp", "Ronja", "Sven", "Thea", "Urs"}
application.Configure(func(cfg *application.Configurator) {
cfg.SetApplicationID("de.worldiety.tutorial")
cfg.Serve(vuejs.Dist())
cfg.RootView(".", func(wnd core.Window) core.View {
text := core.AutoState[string](wnd).Init(func() string {
return ""
})
return VStack(
VStack(
TextField("Filter", text.Get()).
InputValue(text).
FullWidth(),
ScrollView(
VStack().Append(
slices.Collect(func(yield func(core.View) bool) {
filteredNames := make([]string, 0)
for _, name := range names {
if strings.Contains(strings.ToLower(name), strings.ToLower(text.Get())) {
filteredNames = append(filteredNames, name)
}
}
for _, name := range filteredNames {
yield(Text(name))
}
})...,
),
).
Frame(Frame{MaxHeight: L200}),
).
Gap(L16).
Frame(Frame{MaxWidth: L880}),
).
Frame(Frame{}.MatchScreen())
})
}).Run()
}
View on GitHub ↗
· run it with go run go.wdy.de/nago/example/cmd/tutorial-88-filtered-list@latest