> ## 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 displays matching product suggestions from the Search API while the customer types in ws-search-box and reacts to keyboard and mouse navigation.

The `<ws-suggest>` component is used to display search suggestions within a search box. The individual suggestions are displayed as a list and can be selected by mouse click or via the keyboard (arrow keys for navigation, Enter to select).

Optionally, an additional "Show all results" element can be shown at the end of the list, which is treated like a regular suggestion. When selected, a search with the current search term is triggered. The placeholder `{%query%}` in `show-all-message` is dynamically replaced with the entered search term.

***

## Component

The component can be embedded within `<ws-search-box>` to control the display of the suggest box:

```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="Show all results for: <strong>{%query%}</strong>">
</ws-suggest>
```

* **Attributes**
  * `suggest-container-class` – Specify CSS class(es) for the container of the suggest box.
  * `suggest-item-class` – Specify CSS class(es) for the suggest items.
  * `use-show-all`
    * `true` / `yes` – Activates the additional "Show all" element (show all results) at the end of the suggestion list.
  * `show-all-class` – Specify CSS class(es) for the "Show all" element.
  * `show-all-message` – Display text for the "Show all" element. In the display text, `{%query%}` can be replaced with the current search term. Default: `Show all results for: '{%query%}'`.

<Info>
  The attributes `use-show-all`, `show-all-class`, and `show-all-message` are only relevant in the simple mode (without `<ws-suggest-result>`). In orchestrator mode, `show-all` is configured via a `<ws-suggest-result source="show-all">` element.
</Info>

***

## Orchestrator mode

As soon as `<ws-suggest>` contains at least one `<ws-suggest-result>` child element, `Orchestrator Mode` is activated automatically. In this mode, `<ws-suggest-result>` takes over control of the display per result type (for example search suggestions, products, categories).

Further details on the configuration of `<ws-suggest-result>` are described [here](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result).

***

## suggest-container

The `suggest-container` attribute can be set on any HTML element. This causes that element (including all child elements) to be hidden and shown together with the associated `<ws-suggest-result>` – for example, to hide section headings together with the result area because no results are available.

**Example**

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

    <!-- Everything within this container (including the container itself)
         is shown/hidden together with ws-suggest-result -->
    <div suggest-container>
      Search suggestions

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

    </div>

</ws-suggest>
```

***

## Mustache delimiters in templates

Since the VX template engine uses `{{ }}` as delimiters, which leads to conflicts with the Mustache rendering of the components, different delimiters are used in all web component templates:

* `Webcomponents (ws-suggest, ws-suggest-result, …)` uses `{% %}`
* `VX template engine` uses `{{ }}`

**Example**

```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 via CSS

If no own CSS classes are specified via the component, the search sets default classes:

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

**Example source code for the 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="Show all results for: &lt;strong&gt;{%query%}&lt;/strong&gt;">
...

      Mokassin (90)
      Mokassin-Ballerina (73)
      Mokassin-Handnaht (50)
      Show all results for: <strong>Mokas</strong>

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