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.

<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: - query — search suggestions - product — product suggestions - category — category suggestions - content — content suggestions. If several content sources are configured, their suggestions are displayed combined. - content_<name> — suggestions of a single content source, for example content_blog. See section Multiple content sources. - show-all — “Show all results” link
use-ajax	Optional Enables external rendering via the wsLoadAjax template function (wsResultDispatcher.subscribe("suggest", ...)). - Requires ws-search-template-helper from version 1.0.6 onwards. - With use-ajax="no", a <template> element is required for rendering, see example above.
data-value	Required for clickable elements 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

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.

If several content sources 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.

<!-- 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.

The previous usage with source="content" for a single content configuration continues to work unchanged.

---

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.

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

Example

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

      Show all results for: {%query%}

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

---

hide-with

hide-with is deprecated and is replaced from ws-search-component-1.9.1.js onwards by the visibility attribute. hide-with still works, but should no longer be used in newer projects.

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>"

hide-with is currently only available for ws-suggest-result and ws-search-result.

Example

<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 - to — end of the current page, for example 16 for a page size of 16 - total — total number of search results
Without source attribute	Rendered by the template helper (>=v1.0.6).	- query — current search term - from — start of the current page, for example 1 for a page size of 16 - to — end of the current page, for example 16 for a page size of 16 - size — page size, for example 16 - total — total number of search results

Example

<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

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