> ## 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 separately, for example search suggestions, products and categories. 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 a separate `<ws-suggest-result>` instance is used as a child element of `<ws-suggest>`, for example for `product` and `category`.

```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. If several content sources are configured, their suggestions are displayed combined.<br />- `content_<name>` — suggestions of a single content source, for example `content_blog`. See section [Multiple content sources](#multiple-content-sources).<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=""`.                                                                                                                                                                                                                                                                                             |

***

## Multiple content sources

<Info>
  The separated display of individual content sources requires **websale\_search\_webcomponents v1.7.0**. In the backend, **elasticsearch\_manager v1.15.0** and **websale\_search v1.18.0** are additionally required.
</Info>

If [several content sources](/en/ws-search/konfiguration-des-such-moduls#multiple-content-sources-for-the-search) are configured in the search module, you can output their suggestions separately. The name after the underscore corresponds to the `name` of the source in the configuration.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- All content suggestions combined -->
<ws-suggest-result source="content"></ws-suggest-result>

<!-- Only the static content pages -->
<ws-suggest-result source="content_static"></ws-suggest-result>

<!-- Only the blog suggestions -->
<ws-suggest-result source="content_blog"></ws-suggest-result>

<!-- Only the magazine suggestions -->
<ws-suggest-result source="content_magazin"></ws-suggest-result>
```

For a source to deliver suggestions, it must additionally be enabled in the `suggest_config` of the search module. Sources without an entry only appear in the search results, not in the suggest list.

<Info>
  The previous usage with `source="content"` for a single content configuration continues to work unchanged.
</Info>

***

## show-all: Simple text replacement

With the other `source` types such as `query` or `product`, Mustache is used. This is 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, namely 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>`. Typical use cases are 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>
```

With multiple content sources, the value follows the same pattern and contains the name of the source, for example `hide-with="ws-search-result-content_blog"`.

***

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


## Related topics

- [ws-suggest](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest.md)
- [Coupling element visibility to components](/en/ws-search/integration-in-die-templates-storefront/sichtbarkeit-von-elementen-an-komponenten-koppeln.md)
- [UI components](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten.md)
- [Search & search result page](/en/ws-search/integration-in-die-templates-storefront/suche-suchergebnisseite.md)
- [Filter & sort on categories](/en/ws-search/integration-in-die-templates-storefront/filtern-sortieren-auf-kategorien.md)