Die Komponente <ws-searchbox> stellt das Sucheingabefeld im Frontend bereit. Sie ermöglicht die Integration eines Suchfeldes mit optionaler Suggestfunktion. Die Komponente kann durch zusätzliche HTML-Elemente wie ein Eingabefeld und einen Suchbutton erweitert werden.

Komponente

Die Komponente kann wie folgt auf alle Seiten des Shops, auf denen ein Sucheingabefeld angezeigt werden soll, integriert werden:

<ws-searchbox use-suggest="true">
    <input type="search" name="query" placeholder="Suchbegriff / Artikelnummer eingeben">
    <ws-search-button>
        <button type="button" title="Suche abschicken"></button>
    </ws-search-button>
</ws-searchbox>

Attribute und Elemente
- use-suggest:
  - Wenn auf true gesetzt, wird die Suggestfunktion aktiviert (automatische Vorschläge während der Eingabe).
  - Wird auf false gesetzt oder weggelassen, bleibt die Suggestfunktion deaktiviert.
- <ws-search-button>: Komponente zur Darstellung des Suchbuttons.

Suggest

Die Suggest-Funktion wird innerhalb der Komponente <ws-searchbox> bereitgestellt und zeigt automatisch Vorschläge an, sobald der Nutzer mindestens zwei Zeichen im Eingabefeld eingibt. Die Funktion wird durch das JavaScript-Bundle wsSearchComponent.js gesteuert, welches die Effekte zum Ein- und Ausblenden der Vorschläge realisiert.

Sobald der Nutzer mindestens zwei Zeichen eingibt, wird dynamisch folgender HTML-Code für die Vorschläge erzeugt:

<div class="suggestions" style="display: block;">
    <div class="suggestion-item" data-value="Krämer">
        Vorschlag (480)
    </div>
    <div class="suggestion-item" data-value="Kragen">
        Kragen (286)
    </div>
    <div class="suggestion-item" data-value="Kreditkarte">
        Kreditkarte (104)
    </div>
    <div class="suggestion-item" data-value="Kreuzbegurtung">
        Kreuzbegurtung (91)
    </div>
    <div class="suggestion-item" data-value="Krankenschuhe">
        Krankenschuhe (25)
    </div>
</div>

Attribute der generierten Vorschläge
- suggestions: Container für die Liste der Vorschläge.
  - style="display: block;": Der Stil steuert die Sichtbarkeit der Vorschläge. Das Ein- und Ausblenden wird durch das wsSearchComponent.js-Bundle gesteuert.
- suggestion-item: Jedes Element der Vorschlagsliste.
  - data-value: Der Wert, der im Eingabefeld übernommen wird, wenn der Nutzer den Vorschlag auswählt.
  - Der sichtbare Text zeigt den Vorschlagsbegriff sowie die Anzahl der Treffer in Klammern an (z. B. "Kragen (286)").

CSS & Styling

Diese Komponente generiert ohne aktivierte Suggestfunktion keine spezifischen CSS-Klassen oder HTML-Code. Das Styling kann jedoch durch zusätzliche CSS-Anweisungen angepasst werden. Innerhalb der Komponente können weitere HTML-Elemente eingefügt und gestaltet werden.

Mit aktivierter Suggestfunktion werden folgende CSS-Klassen automatisch generiert und können für individuelles Styling verwendet werden:

suggestions: Container für die Liste der Vorschläge.
suggestion-item: Einzelnes Vorschlagselement, das den Text und die Trefferanzahl anzeigt.