Suchhilfe bei Checkboxauswahl

[Rolf B]

Hallo Jörg,

ich hab sowas für meinen Brötchengeber gebaut, weil ich da eine ähnliche Anforderung habe. Aber das darf ich nicht publizieren.

Die Idee ist:

• ein Texteingabefeld (genauer input type="search")
• eine Liste (bei mir eine Table) mit den darzustellenden Daten
• eine Prise CSS, die dafür sorgt, das alle Einträge ausgeblendet werden, die eine bestimmte Klasse haben (z.B. "no-match"). Diese Klasse ist beim Laden der Seite nicht vorhanden, so dass initial alles angezeigt wird.
• mit JavaScript einen input-Handler drauflegen, so dass jede Änderung zu einem Eventhandler-Aufruf führt
• nach jeder Änderung des Feldinhaltes alle Einträge der Liste durchgehen und pro Eintrag prüfen, ob er auf die Suche passt. Wenn nicht, die Klasse "no-match" setzen
• Wird das Eingabefeld geleert, sicherstellen, dass die Klasse überall entfernt wird

Das ist eigentlich alles. Mit etwas jQuery auch einfach gemacht.

Changehandler registrieren:

$("#suchfeld").on("input", handleSearchEntry);

Alle Listeneinträge durchlaufen

$("#liste li").each(checkMatch);

handleSearchEntry und checkMatch sind die entsprechenden Funktionen.

Ob es dafür was fertiges gibt - keine Ahnung. Der Schmalz steckt in "checkMatch", das musst Du so programmieren, dass die Suche richtig läuft und je nach Ergebnis die no-match Klasse setzen.

Es geht natürlich auch andersrum, eine Klasse "match" setzen und per CSS dafür sorgen, dass nur die li mit dieser Klasse erscheinen. Dann musst Du aber beim Laden der Seite dafür sorgen, dass alle li diese Klasse haben, oder Du siehst erstmal nichts.

Rolf