nicht angemeldet
Suchhilfe bei Checkboxauswahl
Rolf BHallo,
ich würde gerne einer Liste an "Einträgen mit einer Checkbox" innerhalb eines Formulars eine Suche hinzufügen, damit bei einigen zig oder hundert Einträgen nicht immer die komplette Liste "manuell-visuell" durchsucht werden muss.
Warum nutze ich Checkboxen für die Einträge und nicht multiselects? Weil für jeden Eintrag ca. 6-8 Zeilen benötigt werden, die formatiert dargestellt einfach übersichtlicher für den User sind als ein Dropdown. Ansonsten wäre das chosen-Plugin ganz gut geeignet gewesen. (oder auch sowas, wie hier im Forum für das Einfügen der tags)
Gibt es da JS-seitig irgendetwas, basierend auf JQuery oder UI?
Gruß, Jörg
-
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
--
sumpsi - posui - obstruxi-
Hallo Rolf,
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.
Klasse Idee. Würde ich mir mit etwas Unterstützung auch zutrauen, selber zu bauen. Aber durch Deine idee bin ich darauf gekommen, dass ich bereits ein fertiges Plugin nutze, dass genau das innerhalb von Tabellen macht. Wirklich 1:1 so, wie Du beschreibst, ich hatte es nur nihct mehr auf dem Schirm.
Und ich nutze es sogar innerhalb meines Systems bereits mit Checkboxen.
Das Plugin nennt sich "quicksearch" (für den Fall, dass mal irgendwer dasselbe sucht und auf diesen Forenbeitrag stößt.
Leider ist das Original schon 10-12 Jahre alt und ich finde keinen Link mehr dahin und die Forks dieses Plugins kenne ich nicht, daher kann ich es nicht verlinken. 🙁 Aber mein Original funktioniert und ich weiß, wie ichs nutzen muss. Daher schaue ich mir die Forks nicht an, aber wer interessiert ist, kann mal unter diesem Stichwort suchen.
Danke auf jeden Fall für die gute Idee, Rolf.👍
Gruß, Jörg
-
Hallo Jörg,
dass ich bereits ein fertiges Plugin nutze, dass genau das innerhalb von Tabellen macht.
🤣🤣🤣🤣🤣
Rolf
--
sumpsi - posui - obstruxi-
Hi Rolf,
dass ich bereits ein fertiges Plugin nutze, dass genau das innerhalb von Tabellen macht.
🤣🤣🤣🤣🤣
Jaja, man wird nicht jünger 🤭😇
Jörg
-
-
Leider ist das Original schon 10-12 Jahre alt und ich finde keinen Link mehr dahin und die Forks dieses Plugins kenne ich nicht, daher kann ich es nicht verlinken. 🙁 Aber mein Original funktioniert und ich weiß, wie ichs nutzen muss. Daher schaue ich mir die Forks nicht an, aber wer interessiert ist, kann mal unter diesem Stichwort suchen.
Hier dann doch noch ein Link.
Und eine Demo.
Jörg