1. Container
2. Lupen-Icon
3. Eingabetext
4. Löschen-Funktion
5. Hinweistext

Das Suchfeld ist ein Eingabefeld, welches es Nutzenden ermöglicht per Texteingabe nach Elementen zu suchen. Das Suchfeld trägt die programmatische Beschriftung “Suche nach [Bezeichnung]” und enthält außerdem vor Eingabe des ersten Zeichens den visuellen Platzhaltertext “Suche nach [Bezeichnung]” (Beispiele: “Suche nach Aktenzeichen” oder “Suche nach Ehrenamtlichen Richtern”).

Bei Fokuserhalt wird die programmatische Feldbeschriftung vom Screenreader ausgegeben und der Textcursor wird vor dem ersten Zeichen des Platzhaltertexts im Feld angezeigt. Sobald Nutzende ein Zeichen im Suchfeld eingeben (kann auch ein Leerzeichen sein), verschwindet der Platzhaltertext.

Nach Eingabe des ersten Zeichens erscheint ein Button mit X-Symbol, welcher es ermöglicht, den kompletten eingegebenen Inhalt wieder zu löschen (der Button hat eine Klickfläche von 40x40px). Der Button hat den Tooltip sowie die programmatische Beschriftung “Eingabe entfernen”. Der Tooltip wird bei Mouse-Hover angezeigt, der Button ist jedoch per Tastatur nicht fokussierbar (Entfernen der Feldinhalte ist mit Tastatur via Ctrl+A und Backspace bzw. Entfernen möglich). Nach Zurücksetzen der Suchfeld-Inhalte wird der Platzhaltertext im Feld wieder angezeigt.

Durch Enter oder Klick auf die Lupe (Klickfläche von 40x40px) wird die Suche gestartet. Der Button hat den Tooltip sowie die programmatische Beschriftung “Suche starten”. Der Tooltip wird bei Mouse-Hover angezeigt, der Button ist jedoch per Tastatur nicht fokussierbar. Je nach Verwendung des Suchfeldes, kann die Suche auch live direkt nach der Eingabe von Zeichen starten (siehe Suchergebnisanzeige bei Elementen Tabelle: Suchergebnisanzeige in Tabellen, Liste: Suchergebnisanzeige in Listen oder Baumstruktur: Verhalten Such- und Filterergebnisanzeige).

Was wird gesucht: 

• Texteingabe = 1..n beliebige Zeichen (Leerzeichen ([ ]) inklusive). Beispiel: [ ](Leerzeichen) findet den Begriff "Allgemeine Zivilsachen" und filtert den Begriff "Zivil" heraus.
• Es gilt generell das Suchmuster “Beinhaltet [...]”. Das heißt es wird nach Zeichenabfolgen gesucht, die irgendwo innerhalb eines Wertes vorkommen (egal ob an Anfang/Mitte/Ende eines Wertes/Wortes). Beispiel: ivi findet den Begriff "Zivil" und den Begriff "Allgemeine Zivilsachen".
• Groß-/Kleinschreibung wird nicht beachtet
• Ein Leerzeichen zwischen zwei Wörtern im Suchfeld unterbricht den String und die Reihenfolge der zwei Wörter spielt dementsprechend keine Rolle. Beispiel: Suche nach “Hans Peter” oder “Peter Hans” findet beides den Eintrag “Fischer, Hans Peter”. 
• Bei, mit Leerzeichen voneinander getrennten, Strings können die Einzelstrings auch in verschiedenen Attributen vorkommen. Beispiel: Eine Suche nach "Daniel Hamb" würde Daniel Müller aus Hamburg anzeigen, sofern auch die Spalte “Adresse” durchsucht wird.
• Wurde die Option “Phonetischen Suche” aktiviert, so wird nach dem Regelwerk der Kölner Phonetik gesucht. Dies beinhaltet beispielsweise, dass Umlaute auch durch Eingabe ihrer ausgeschriebenen Version gefunden werden und umgekehrt. Beispiel: “ue” findet auch “ü”. “ä” findet auch “ae” usw.

• “*” kann als Platzhalter für eine beliebige Zeichenzahl (auch null) verwendet werden. Beispiel: Wird nach “Se*ger” gesucht, würde sowohl “Seger”, “Seeger” als auch “Seeberger” gefunden werden.
• “?” kann als Platzhalter für genau ein Zeichen verwendet werden. Gibt ein Nutzer mehrere Fragezeichen hintereinander ein, so ist die Zahl der Fragezeichen gleich der Zeichenzahl. Beispiel: “???” steht als Platzhalter für drei Zeichen. Hinweis: siehe Barrierefreiheit.

• Suchtreffer-Hervorhebungen in der Aufklappliste bzw. der Ergebnistabelle, -liste oder Baumstruktur:
• Wird der eingegebene Suchbegriff in einem Attribut mehrmals gefunden, so werden auch alle der übereinstimmenden Stellen in der Ausklappliste oder der Ergebnistabelle markiert. Beispiel: Wird nach “Ma” gesucht, so werden bei der Person “Maier, Max” beide Wortanfänge markiert.
• Leerzeichen, welche in einer Suchphrase zu einer String-Trennung führen, werden selbst nicht hervorgehoben – dafür werden alle durch die Trennung entstandenen einzelnen Suchphrasen-Teile separat hervorgehoben. Beispiel: Bei Suche nach "Maier Peter" wird "Maier, Hans Peter" gefunden und “Maier” und “Peter” wird jeweils hervorgehoben. Auch die Reihenfolge der eingegebenen Begriffe spielt keine Rolle für die visuelle Hervorhebung. Wird “Peter Maier” gesucht, werden ebenfalls die beiden Wörter in “Maier, Peter Hans” hervorgehoben.
• Bei Wildcard-Nutzung wird der gefundene Platzhaltertext ebenfalls hervorgehoben. Bei Verwendung des “*” wird immer nur bis zum Wortende des gefundenen Begriffs bzw. bis zum nächsten Leerzeichen markiert.
• Treffer in durchsuchten Attributen, welche in der Tabelle/Liste/Baumstruktur aber nicht sichtbar sind, werden auch nicht visuell hervorgehoben.
• Wurde die Phonetische Suche aktiviert, so werden auch die Suchergebnisse hervorgehoben, welche auf Grund der kölner Phonetik gefunden werden. Beispiele: Wurde “ae” eingegeben, so wird auch “ä” gehighlighted. Wurde “ü” eingegeben, so wird auch “ue” gehighlighted. "Škoda" findet auch "Skoda" und umgekehrt.

Erweiterungen der Funktionalität der Suchfunktion sind in folgenden Inkrementen denkbar. Beispielsweise kann möglicherweise die Definition von Wildcards oder anderen Suchmustern erweitert werden und Funktionalitäten wie eine Autovervollständigung bzw. intelligente Suchvorschläge hinzukommen.

Fangen Nutzende im Suchfeld an zu Tippen, so wird nach Eingabe des ersten Zeichens eine Vorschlagliste angezeigt, sofern Werte aus der hinterlegten statischen Liste bzw. einer angebundenen Datenbanktabelle mit dem eingegebenen Wert übereinstimmen. Zwischen jeder Wertänderungen und der entsprechenden Aktualisierung der Trefferliste besteht eine Verzögerung von 400ms. So haben Nutzende die Möglichkeit, Ihre Eingabe zunächst zu beenden (statt Ausführen der Aktion bei jedem Tastendruck).

Basierend auf der fachlichen Anforderung sollte definiert werden, welches der folgenden Suchverhalten gilt:

• “Beinhaltet [...]” – Sucht nach Zeichenabfolgen, die irgendwo innerhalb der Bezeichnung vorkommen.
• “Startet mit [...]” – Sucht nur nach Zeichenabfolgen die am Anfang der Bezeichnung stehen. Falls nicht definiert gilt die Regel “Beinhaltet [Suchbegriff]”.

Der mit dem Suchbegriff übereinstimmende Textabschnitt in der Vorschlagliste ist im Schriftschnitt Bold gesetzt. Der restliche Text des Vorschlags ist in Regular gesetzt.

Falls die Serverabfrage für die Suche länger dauert (über 200ms), wird ein Ladezustand (loading spinner) im Dropdown angezeigt, bis Suchergebnisse vorhanden sind.

Verhalten der Ausklappliste bei kleiner Bildschirmhöhe, siehe Eingabe- und Auswahlfeldern: Ausklapplisten bei kleiner Bildschirmhöhe.

Das Eingabe-/Auswahlfeld sowie die Vorschlagliste müssen im geöffneten Zustand vollständig im sichtbaren Bereich liegen. Reicht der Platz nicht aus, um das Dropdown und das Auswahlfeld über die ganze Höhe darzustellen, so scrollt die Seite automatisch beim Öffnen ein Stück nach unten. Das Auswahlelement ist somit am oberen Bildschirmrand zu sehen, und das Dropdown-Element füllt den restlichen Seitenplatz.

Folgende Zustände gelten auch für Suchfelder ohne Hinweistext:

Zustände der Suchfelder mit automatischer Vorschlagliste:

Nicht jeder Screenreader gibt das Zeichen "?" aus. Um das Zeichen ausgegeben zu bekommen, müssen Nutzende unter Umständen ihre Screenreadereinstellungen ändern. Dies sollte ggf. in Schulungen erwähnt werden.

Sobald Ergebnisse gefunden oder aktualisiert wurden, wird vom Screenreader die Anzahl der gefundenen Einträge automatisch ausgeben. Text: “[Anzahl] Vorschläge vorhanden”.

Der Alternativtext des Lade-Symbols, der vom Screenreader ausgegeben wird lautet “Ergebnisse werden geladen”. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden.

Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Ergebnisse werden geladen” ausgelesen.

Noch offen: Verhalten bei ausbleibender Server-Antwort (Hier ist vorher die technische Umsetzung zu klären)

• Mit der Tab-Taste wird das Suchfeld fokussiert. 
• Bei ggf. bereits vorhandenem Text wird dieser komplett ausgewählt, bis neuer Text eingegeben oder die Markierung durch Pfeil links oder rechts aufgehoben wird
• Dann kann Text eingegeben werden. 
• Pfeiltaste nach links oder rechts bewegt den Cursor entsprechend um ein Zeichen
• Enter startet die Suche
• Durch Drücken der Tab-Taste, wird das nächste Interaktionselement fokussiert und die bestehende Eingabe im Textfeld bleibt unverändert bestehen.

• Grundbedienung siehe oben bei Suchfeld
• Sobald Nutzende mind. ein Zeichen eingegeben haben, wird eine Liste mit Vorschlägen angezeigt. Mit jedem getippten Buchstaben wird die Liste gefiltert auf Begriffe, die mit der eingegebenen Zeichenfolge beginnen bzw. die Zeichenfolge beinhalten.
• Auch bei mit Backspace entfernten Zeichen wird die Liste entsprechend aktualisiert.
• Falls vorher bereits ein Wert im Eingabefeld eingegeben war, wird die Vorschlagliste erst geöffnet, nachdem mindestens ein Zeichen hinzugefügt oder entfernt wurde.
• Nach dem Einblenden der Vorschlagliste sollte nicht automatisch der erste Eintrag markiert sein.
• Mit der Pfeiltaste nach unten wird der erste Eintrag visuell hervorgehoben. Der Tastaturfokus bleibt im Eingabefeld.
• Mit den Pfeiltasten nach unten/oben kann zum nächsten/vorherigen vorgeschlagenen Werten gewechselt werden. Der Systemfokus bleibt währenddessen im Eingabefeld und der Cursor blinkt weiterhin.
• Enter- oder Leertaste wählt den fokussierten Vorschlag aus der Liste aus und schließt die Vorschlagliste.
• Mit Escape kann die Liste geschlossen werden, ohne dass eine Auswahl getätigt wird.

• Durch Klick mit linker Maustaste auf das Suchfeld wird es fokussiert.
• Bei leerem Eingabefeld wird der Cursor an den Anfang gesetzt, bei bereits vorhandenem Text wird er an die entsprechende Stelle gesetzt. 
• • Single-Klick: Cursor wird an position gesetzt
  • Double-Klick: Aktuelles Wort wird selektiert
  • Tripple-Klick: Gesamter Text-Inhalt wird selektiert
• Dann kann ein Text eingegeben werden. 
• Klicken mit linker Maustaste auf das Lupen-Symbol startet die Suche.
• Klick mit linker Maustaste auf das X-Symbol im Suchfeld leert den eingegeben Text. Der Fokus bleibt im Suchfeld.
• Durch Klick mit linker Maustaste auf ein anderes interaktives Element auf der Seite, wird dieses fokussiert. Der ggf. bereits eingegebene Text im Suchfeld bleibt unverändert stehen.

• Grundbedienung siehe oben bei Suchfeld
• Sobald Nutzende mindestens ein Zeichen im Feld eingegeben haben, wird eine Liste mit passenden Vorschlägen angezeigt. Mit jedem getippten Buchstaben wird die Liste gefiltert auf Begriffe, die mit der eingegebenen Zeichenfolge beginnen.
• Falls vorher bereits ein Wert im Eingabefeld eingegeben war, wird die Vorschlagliste erst geöffnet, nachdem mindestens ein Zeichen hinzugefügt oder entfernt wurde.
• Klick mit linker Maustaste auf einen der vorgeschlagenen Werte wählt diesen aus und schließt die Vorschlagliste.
• Ein Klick mit linker Maustaste außerhalb der Vorschlagliste und des Eingabefeldes an eine beliebige Stelle auf dem Screen schließt die Ausklappliste, ohne, dass eine Auswahl getätigt wird.