Tom Select: durchsuchbare Select-Felder

Wolltest du schon mal ein Select-Feld mit allen etwa 200 Ländern der Welt benutzerfreundlicher gestalten? Für solche Fälle — und einige mehr — lohnt sich ein Blick auf Tom Select.

Tom Select ist die moderne VanillaJS-Variante von Chosen (das du aus dem Contao-Backend kennst). Es macht die Optionen eines Selects durchsuchbar, und dank der Javascript-API sind noch einige coole Sachen mehr möglich — schau dir mal die Beispiele an.

Anwendungsfall: Autocomplete für Unterseiten in Contao

Tom Select taugt nicht nur für klassische Formularfelder. Ein Beispiel: eine „Autocomplete/Autosuggest“-Funktion für eine Liste von Unterseiten — mit deutlich weniger Aufwand, als eine vollwertige Suche zu programmieren.

Der Weg dorthin:

1. Ein eigener Controller nach dem Vorbild der Contao Quicknavigation erzeugt ein Select mit den gewünschten Unterseiten.
2. Tom Select macht die Optionen des Selects durchsuchbar.

Das Ergebnis: eine superschnelle Suche für Unterseiten mit verhältnismäßig wenig Aufwand.

Ab wann lohnt sich Tom Select?

Als Faustregel: Ab etwa 10 Optionen kann sich eine Lösung wie Tom Select lohnen. Bei sehr wenigen Optionen ist dagegen oft nicht mal ein Select die beste Wahl — siehe Select oder Radio-Buttons?