Skip to main content
The <ws-search-box> component provides the search input field in the frontend. It enables the integration of a search field with an optional suggest function. The component can be extended with additional HTML elements such as an input field and a search button.

​
Component

The <ws-search-box> component can be used multiple times within the same template. This is useful, for example, when the search input field should be positioned or styled differently for desktop and mobile devices (for example in the header and additionally in the off-canvas menu). The component can be embedded on all pages of the shop on which a search input field is to be displayed, as follows:
  • Attributes and elements
    • use-suggest:
      • When set to true, the suggest function is enabled (automatic suggestions during input).
      • When set to false or omitted, the suggest function remains disabled.
    • use-auto-completion:
      • yes – Auto-completion is active in the input field.
      • no – Auto-completion in the input field is disabled. Server-side auto-completion continues to run and provides additional suggestions for the suggest.
    • show-query: Specifies whether the search term should be displayed in the search bar after a search.
    • input-delay: Specifies the delay in milliseconds after which a search suggestion should appear.
    • ghost-color: rgba color of the “ghost text” when auto-completion is active.
    • <ws-search-button>: Component for rendering the search button.

​
CSS & styling

Without the suggest function enabled, this component does not generate any specific CSS classes or HTML code. The styling can, however, be adjusted using additional CSS statements. Additional HTML elements can be inserted and styled within the component. With the suggest function enabled, the following CSS classes are generated automatically and can be used for custom styling:
  • suggestions: Container for the list of suggestions.
  • suggestion-item: Individual suggestion element that shows the text and the hit count.