Search Bar (vviinn-text-search)

Generated from vviinn-widgets 2.228.0, the latest release when these docs were built. If you pin an older version, some of these may not be in it yet — check the Changelog.

Try the properties live in the Playground.

Properties

Set them as HTML attributes.

api-path

API endpoint URL (optional, defaults to production)

Type: string

auto-suggest-show

Show auto-suggest dropdown with search completions

Type: boolean · Default: true

css-url

URL to external CSS file for custom styling of the visual search modal

Type: string

example-image-source

Example image shown in the visual search modal

Type: string

locale

Locale for text localization

Type: "de-DE" | "en-US"

mode

Basic or extended text search with search modal and speech recognition

Type: "basic" | "extended" · Default: "basic"

placeholder

Custom placeholder for the text search input

Type: string · Default: ""

results-page-params

Custom URL param names for results page redirect. Default: "query=query&searchId=searchId".

Type: string

results-page-url

URL of the results page for automatic search redirect.

Type: string

search-query

Query for the text search passed from widget

Type: string

token

Vviinn customer's token (required)

Type: string

use-drag-and-drop

Accept image files dropped from the OS onto the upload button (desktop only)

Type: boolean · Default: false

visual-search-mode

Visual search modal mode (modal/camera/upload)

Type: "camera" | "modal" | "upload"

Events

Listen with document.addEventListener(). The pages under Events describe the data each event carries.

Event	Description
`vviinnFilterTriggered`	A filter was triggered
`vviinnImageUploadFinished`	An image search ID was received (used by vviinn-results component)
`vviinnNoResult`	Triggered when a text search request fails
`vviinnRedirect`	A redirect URL is received from the API (can be intercepted by client)

Slots

Replace texts and icons with your own content: Replace Widget Content.

Slot	Description
`vviinn-camera-button-text-start`	Title of Start Camera button in the search modal.
`vviinn-camera-button-text-stop`	Title of Stop Camera button in the search modal.
`vviinn-camera-icon`	Icon of Camera Button in the search modal.
`vviinn-image-search-modal-title`	Search modal title.
`vviinn-image-upload-button-text`	Title of Upload Button in the search modal.
`vviinn-image-upload-icon`	Icon of Upload Button in the search modal.
`vviinn-privacy-badge-text`	Text content of privacy notification in the search modal.
`vviinn-teaser-text`	Text on the search modal's main screen.
`vviinn-text-search-actions`	Additional actions for the text search block, e.g., a button to open the Search Modal.
`vviinn-text-search-icon`	Icon of the text search block.

Shadow Parts

Style these elements with vviinn-text-search::part(name): Styling Specific Elements.

Part	Description
`close-button`	Close Button in the search modal's header.
`secondary-action`	Back Button in the search modal's header.
`speech-button`	Speech recognition button.
`start-camera_button`	Start Camera Button in the search modal.
`suggestion-item`	Individual auto-suggest item.
`suggestions-container`	Auto-suggest dropdown container.
`text-search-button`	Text search input's search button.
`text-search-container`	Container for the text search block.
`text-search-input`	Text search input.
`text-search-tooltip`	Text search tooltip.
`upload-photo_button`	Upload Photo Button in the search modal.
`vviinn-button`	Visual search button element in the search bar (extended mode).

CSS Custom Properties

Set them on vviinn-text-search or a parent element: CSS Variables.

Property	Description
`--font-family`	The font family of the text search.