> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ws-suggest

> ws-suggest zeigt während der Eingabe in ws-search-box passende Produktvorschläge aus der Search-API und reagiert auf Tastatur- und Mausnavigation.

Die Komponente `<ws-suggest>` dient zur Anzeige von Suchvorschlägen innerhalb einer Suchbox. Die einzelnen Vorschläge werden als Liste dargestellt und können per Mausklick oder über die Tastatur (Pfeiltasten zur Navigation, Enter zur Auswahl) ausgewählt werden.

Optional kann am Ende der Liste ein zusätzliches „Alle Ergebnisse anzeigen"-Element eingeblendet werden, das wie ein regulärer Vorschlag behandelt wird. Bei Auswahl wird eine Suche mit dem aktuellen Suchbegriff ausgelöst. Der Platzhalter `{%query%}` in `show-all-message` wird dabei dynamisch durch den eingegebenen Suchbegriff ersetzt.

***

## Komponente

Die Komponente kann innerhalb von `<ws-search-box>` integriert werden, um die Anzeige der Suggestbox zu steuern:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-suggest
  suggest-container-class="suggestions"
  suggest-item-class="suggestion-item"
  use-show-all="yes"
  show-all-class="suggestion-show-all-item"
  show-all-message="Alle Ergebnisse anzeigen für: <strong>{%query%}</strong>">
</ws-suggest>
```

* **Attribute**
  * `suggest-container-class` - Angabe von CSS-Klasse(n) für den Container der Suggestbox
  * `suggest-item-class` - Angabe von CSS-Klasse(n) für die Suggest-Items
  * `use-show-all`
    * `true` / `yes` - Aktiviert das zusätzliche „Show-All"-Element (Alle Ergebnisse anzeigen) am Ende der Vorschlagsliste
  * `show-all-class` - Angabe von CSS-Klasse(n) für das „Show-All"-Element
  * `show-all-message` - Anzeigetext für das „Show-All"-Element. Im Anzeigetext kann `{%query%}` durch den aktuellen Suchbegriff ersetzt werden. Default: `Alle Ergebnisse anzeigen für: '{%query%}'`.

<Info>
  Die Attribute `use-show-all`, `show-all-class` und `show-all-message` sind nur im einfachen Modus (ohne `<ws-suggest-result>`) relevant. Im Orchestrator Mode wird `show-all` über ein `<ws-suggest-result source="show-all">`-Element konfiguriert.
</Info>

***

## Orchestrator Mode

Sobald `<ws-suggest>` mindestens ein `<ws-suggest-result>`-Kindelement enthält, aktiviert sich automatisch der `Orchestrator Mode`. In diesem Modus übernimmt `<ws-suggest-result>` die Steuerung der Darstellung je Ergebnistyp (z.B. Suchvorschläge, Produkte, Kategorien).

Weitere Details zur Konfiguration von `<ws-suggest-result>` sind [hier](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result) beschrieben.

***

## suggest-container

Das Attribut `suggest-container` kann auf beliebigen HTML-Elementen gesetzt werden. Dadurch wird dieses Element (inklusive aller Kindelemente) zusammen mit dem zugehörigen `<ws-suggest-result>` aus- und eingeblendet - z.B. um Abschnittsüberschriften gemeinsam mit dem Ergebnisbereich zu verstecken, weil keine Ergebnisse vorhanden sind.

**Beispiel**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-suggest class="wsSuggest">

    <!-- Alles innerhalb dieses Containers (inklusive des Containers selbst)
         wird zusammen mit ws-suggest-result ein-/ausgeblendet -->
    <div suggest-container>
      Suchvorschläge

      <ws-suggest-result source="query">
        <template id="wsQuerySuggestTemplate">
          {%result.label%}
        </template>
      </ws-suggest-result>

    </div>

</ws-suggest>
```

***

## Mustache-Delimiter in Templates

Da die VX-Template-Engine `{{ }}` als Delimiter verwendet, was zu Konflikten mit dem Mustache-Rendering der Komponenten führt, werden in allen Webcomponent-Templates abweichende Delimiter verwendet:

* `Webcomponents (ws-suggest, ws-suggest-result, …)` verwendet `{% %}`
* `VX-Template-Engine` verwendet `{{ }}`

**Beispiel**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<template id="wsProductSuggestTemplate">
  <a href="{%result.url%}" data-value="{%result.name%}">
    {%result.name%}
    {%result.price%} {%result.currency%}
  </a>
</template>
```

***

## Styling per CSS

Werden keine eigenen CSS-Klassen über die Komponente angegeben, setzt die Suche Standardklassen:

* `suggestions`
* `suggestion-item`
* `show-all-item`

**Beispiel-Quellcode für den Suggest-Container**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-suggest use-show-all="yes" show-all-class="suggestion-show-all-item" show-all-message="Alle Ergebnisse anzeigen für: &lt;strong&gt;{%query%}&lt;/strong&gt;">
...

      Mokassin (90)
      Mokassin-Ballerina (73)
      Mokassin-Handnaht (50)
      Alle Ergebnisse anzeigen für: <strong>Mokas</strong>

...
</ws-suggest>
```