Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Web (Legacy) Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Searchfield Übersicht

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 und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • No Result
  • Suggested

Varianten

Standard

Darstellung der Komponente Suchfeld in der Variante Standard
* Die Anzahl der angezeigten Auto-Suggest Begriffe ist für jeden Anwendungsfall zu definieren.{.lead} * Empfehlung maximal 10 Einträge.{.lead}

Im Header

Diese Variante hat folgende Zustände:

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

Spezifikationen

DesignCode

Trouver un composant

Web (Legacy)

Basics Brand Brand Divider Divider Icon Icon Images Images Text Text Typografie Typografie Components Accordion Accordion Autocompletion Autocompletion Breadcrumb Breadcrumb Button Button Captcha Captcha Checkbox Checkbox Checkboxpanel Checkboxpanel Datepicker Datepicker lightbox lightbox Fileselector Fileselector Ghettobox Ghettobox Link Link Loading Indicator Loading Indicator Mediagallery Mediagallery Mediaslider Mediaslider NBC NBC Notification Notification Pagination Pagination Processflow Processflow Radiobutton Radiobutton Radiobuttonpanel Radiobuttonpanel Searchfield Searchfield Select Select Tab Tab Table Table Tag Tag Textarea Textarea Textexpand Textexpand Textfield Textfield Timefield Timefield Toggle Toggle Tooltip Tooltip Usermenu Usermenu
Impressum Contact Paramètres des cookies