Suche UI-Element um detailliert zu filtern

Computer: Software & Programmierung HTML & CSS
#1

Hallo liebe Wissenden,
Ich habe eine bestimmte Wunschvorstellung von einem Suchfilter und würde gerne wissen, ob es so etwas in der Richtung schon gibt.

Z.B. habe ich bestimmte Seiten einer Webpage mit Begriffen getagged. Zum Durchforsten der Seiten hilft mir ein Suchtool. Hier können nicht Wörter eingegeben werden, sondern aus Kategorien und Begriffen (entspr. Tags) ausgewählt werden. Bei der Suche können mehrere Begriffe ausgewählt werden (multiple Options). Wenn ich nun die Suche starte zeigt es mir alle getaggten Seiten an - am Besten der Reihenfolge nach: Am besten geeignet - weniger gut geeignet.

Damit das Popup-Fenster bei nicht-Benutzung permanent offen steht, kann es zugeklappt werden. Und sollte ein Suchbegriff nicht benötigt werden, kann es in der Suchleiste einfach eliminiert werden.

Vielen Dank
Steffi

blob
blob760×733 76.3 KB

#2

Als Beispiel habe ich hier das „Chosen“-JQuery versucht zu modifizieren. Leider fehlt mir Know-How und Zeit…
aber vielleicht könnt Ihr Euch dann besser etwas darunter vorstellen, worauf es mir ankommt:

http://www.design-karlsruhe.com/test-chosen/index.html

Ich möchte, dass die einzelnen Option-Groups sich durch die Background-Farbe unterscheidet. In dem Beispiel ist die Hintergrundfarbe bei allen gewählten Optionen gelb. :frowning:

Und etwas weiteres würde ich gerne benutzerfreundlicher haben: In dem Beispiel schließt sich das Dropdown-Menü automatisch beim Auswählen einer Option. Manchmal möchte ich aber mehr als nur eine Option auswählen. Das heißt, ich muß nach jeder Auswahl das Dropdown-Menü erneut öffnen und durchscrollen :frowning:

Kennt jemand irgendein Tool, das bereits fertig ist - so wie ich es beschrieben habe :wink:

Vielen Dank
Steffi

#3

Wenn dir die Select-Box-Darstellung aus gestalterischer Sicht nicht zusagt, dann ist dein gewähltes Skript vielleicht nicht das Richtige. Deine Anforderung lässt sich (unter Zuhilfenahme von JQuery) in wenigen Zeilen JavaScript umsetzen, so dass du eventuell kein weiteres Plugin/Framework brauchst.

Hier habe ich dir ein vereinfachtes Beispiel hinterlegt:
http://lost-update.de/stuff/9405932.html