> ## 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-result

> ws-suggest-result renders a single suggestion of the autosuggest list with image, title, and link, and passes the selection to ws-search-box.

The `<ws-suggest-result>` component is a child element of `<ws-suggest>` and lets you configure and display several result types (for example search suggestions, products, categories) separately. As soon as at least one `<ws-suggest-result>` is present, `Orchestrator Mode` is activated automatically in `<ws-suggest>`.

***

## Component

Results are grouped per type – for each type (for example `product`, `category`), a separate `<ws-suggest-result>` instance is used as a child element of `<ws-suggest>`.

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

  <ws-suggest-result class="wsQuerySuggest" source="query">
    <template id="wsQuerySuggestTemplate">

        {%result.label%}

    </template>
  </ws-suggest-result>

  <ws-suggest-result class="wsShowAllSuggest" source="show-all">
    <template id="wsShowAllSuggestTemplate">

        Show all results for: {%query%}

    </template>
  </ws-suggest-result>

  <ws-suggest-result class="wsProductSuggest" source="product">
    <template id="wsProductSuggestTemplate">

        ...

    </template>
  </ws-suggest-result>

</ws-suggest>
```

**Attributes**

| **Value**    | **Description**                                                                                                                                                                                                                                                                                                  |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `source`     | Defines the result type displayed by this instance. Possible values:<br />- `query` – search suggestions<br />- `product` – product suggestions<br />- `category` – category suggestions<br />- `content` – content suggestions<br />- `show-all` – "Show all results" link                                      |
| `use-ajax`   | **Optional**<br />Enables external rendering via the `wsLoadAjax` template function (`wsResultDispatcher.subscribe("suggest", ...)`).<br />- Requires `ws-search-template-helper` from version 1.0.6 onwards.<br />- With `use-ajax="no"`, a `<template>` element is required for rendering (see example above). |
| `data-value` | **Required for clickable elements**<br />Every clickable element within a template must have the `data-value` attribute so that keyboard navigation works correctly. For `source="show-all"`, the value may be empty: `data-value=""`.                                                                           |

***

## show-all: Simple text replacement

With the other `source` types (for example `query`, `product`), Mustache is used – a template system that replaces placeholders such as `{%result.value%}` with actual values from the API response and can also process logic such as loops or conditions.

For `source="show-all"`, this is not necessary since there is only one dynamic value: the current search term. Instead, a simple text replacement is used – `{%query%}` is directly replaced with the entered search term.

<Info>
  Important: The only working placeholder is `{%query%}`. Other Mustache placeholders such as `{%result.value%}` are not evaluated here and appear unchanged in the HTML.
</Info>

**Example**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-suggest-result source="show-all">
  <template id="wsShowAllSuggestTemplate">

      Show all results for: {%query%}

  </template>
</ws-suggest-result>
```

***

## hide-with

<Warning>
  `hide-with` is deprecated and is replaced from `ws-search-component-1.9.1.js` onwards by the [visibility](/en/ws-search/integration-in-die-templates-storefront/sichtbarkeit-von-elementen-an-komponenten-koppeln) attribute. `hide-with` still works, but should no longer be used in newer projects.
</Warning>

The `hide-with` attribute can be set on any element to hide it depending on a `<ws-suggest-result>` or `<ws-search-result>` – for example tab buttons or headings that should only be visible when the associated result area has content.

**Syntax**: `hide-with="ws-search-result-<source>"` or `hide-with="ws-suggest-result-<source>"`

<Info>
  `hide-with` is currently only available for `ws-suggest-result` and `ws-search-result`.
</Info>

**Example**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<button type="button" hide-with="ws-search-result-product">Products</button>
<button type="button" hide-with="ws-search-result-category">Categories</button>
<button type="button" hide-with="ws-search-result-content">Content</button>

<h3 hide-with="ws-search-result-product">Products</h3>
<ws-search-result source="product"></ws-search-result>

<h3 hide-with="ws-search-result-category">Categories</h3>
<ws-search-result source="category"></ws-search-result>

<h3 hide-with="ws-search-result-content">Content</h3>
<ws-search-result source="content"></ws-search-result>
```

***

## total-container

The `total-container` attribute (or the CSS class of the same name) enables the display of search result metadata in the frontend. There are two usage modes:

| **Mode**                   | **Description**                               | **Available keys**                                                                                                                                                                                                                                                                            |
| -------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| With `source` attribute    | Rendered by the web components.               | - `from` – start of the current page (for example `1` for a page size of 16)<br />- `to` – end of the current page (for example `16` for a page size of 16)<br />- `total` – total number of search results                                                                                   |
| Without `source` attribute | Rendered by the template helper (`>=v1.0.6`). | - `query` – current search term<br />- `from` – start of the current page (for example `1` for a page size of 16)<br />- `to` – end of the current page (for example `16` for a page size of 16)<br />- `size` – page size (for example `16`)<br />- `total` – total number of search results |

**Example**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<h1 class="wsHeadlineBig mb-3 total-container"
    data-template="Search for &quot;{%result.query%}&quot; ({%result.total%} hits)">
</h1>
```

***

## sort-order

Overrides the backend sorting for the element on which it is set. Intended primarily for `<ws-suggest-result>`, to sort displayed suggestions by a field.

**Syntax**: `<field-name>_<direction>`

**Explanation**

| **Part**     | **Description**                                                                                                     |
| ------------ | ------------------------------------------------------------------------------------------------------------------- |
| `field-name` | Field name from the API response; must be entered in the configuration of the search module under `display_fields`. |
| `direction`  | `asc` (ascending) or `desc` (descending). Default: `asc`                                                            |

**Example**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-suggest-result source="category" sort-order="cat_str_path_asc" use-ajax="yes" id="wsCategorySuggest">
</ws-suggest-result>

<ws-suggest-result source="content" sort-order="title_asc">
  <template id="wsContentSuggestTemplate">
    <a href="/{%result._id%}" class="wsSuggestItem" data-value="{%result._id%}">
      {%result._source.title%}
    </a>
  </template>
</ws-suggest-result>
```