Was macht die Komponente?

Dient zur Eingabe von einfachen Suchabfragen.

Wann soll die Komponente eingesetzt werden?

Wenn dem Benutzer die Eingabe einer Suchabfrage mittels einem oder mehreren (Teil-)Wörtern zur Verfügung gestellt werden soll.

Regeln

• Das Suchfeld hat immer einen Platzhaltertext, mit einem Hinweis, welche Suchbegriffe akzeptiert werden.
• Sobald der Fokus im Suchfeld ist, können bei Bedarf dem Benutzer bis zu 9 häufigste Stichworte «Oft gesucht» angezeigt werden.
• Nachdem der zweite Buchstaben eingetippt wurde, erscheinen vier mögliche Ergebnisse (Auto-Suggest-Mechanismus).
• Die Übereinstimmung der eingegebenen Buchstaben werden in der Treffer-Liste fett ausgezeichnet.
• Falls es keine Treffer gibt, bleiben die häufigsten Stichworte alleine stehen. Sind keine häufigsten Stichworte definiert und es gibt keine Treffer, ist die Auto-Suggest-Box ausgeblendet.
• Zu lange Auto-Suggest-Begriffe werden abgeschnitten und mit «...» gekennzeichnet.
• Werden als Eingabe Webcodes zugelassen, ist der Auto-Suggest-Mechanismus deaktiviert.
• Durch Klick auf den «Suchen» Button (Lupe) oder durch die Enter-Taste wird die Suche ausgelöst.
• Wird der Text während der Eingabe länger als die Breite des Suchfeldes wird der geschriebene Text nach links verdrängt, damit das aktuell Geschriebene immer gesehen wird.
• Nach dem Verlassen des Suchfeldes mit einem langen Text wird dieser am Ende abgeschnitten und mit «...» gekennzeichnet.
• Wird ein Auto-Suggest Begriff aus der Liste angeklickt, wird direkt zu dieser Seite navigiert.

Zustände

Die Komponente hat folgende Zustände:

• Default
• No Result
• Suggested

Varianten

Standard

• Die Anzahl der angezeigten Auto-Suggest Begriffe ist für jeden Anwendungsfall zu definieren.
• Empfehlung maximal 10 Einträge.

Im Header

Diese Variante hat folgende Zustände:

• Default
• Hover
• Focused
• No Result
• Suggested

• Durch Klick auf «Suchen» öffnet sich die Eingabemaske.
• Nach dem Auslösen der Suche, wird die Eingabemaske wieder ausgeblendet und nur der Link «Suchen» angezeigt.
• Diese Komponente darf nur im Header eingesetzt werden.
• Beim Auslösen der Suche werden die Resultate auf einer eigenen Seite dargestellt.
• Während des Tippens werden maximal 4 Auto-Suggest Vorschläge angezeigt.

Spezifikationen

DesignCode