The Search Component

Description

This is a search component for TUI 6M. Its purpose is to demonstrate how such a component can be laid out. At the same time, it serves as a boilerplate for “real” 6M components.

Screenshots

The default view of the component.

Meta

Maintainer picr-developmentb2c-tuicom@tui.com
Locales de-DE, fr-FR

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://cloud.tui.com/6m/search/tui-search/master/main.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. 

<tui-search></tui-search>

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name Description Allowed Values Default Required
suggestions

Toggle Suggestions List On/Off

 true no
suggestionLimit

Limit how many suggestions are fetched

 10 no
suggestionsMobile

Limit how many suggestions are shown on mobile devices

 3 no
suggestionsDesktop

Limit how many suggestions are shown on desktop devices

 10 no
sticky

Toggle Sticky Behaviour On/Off

 false no

Events

Event tui-search.search_update
Type publish
Description

Triggers when filters are updated.
Payload

The payload object of this event has the following properties:

Name query
Description

The search settings (e. g. filters) set by the user
Event tui-search.query_update
Type publish
Description

Triggers when search query is updated.
Payload

The payload object of this event has the following properties:

Name query
Description

The search Query which is given to the system
Type string
Event tui-search.used_suggestion
Type publish
Description

Triggers when user accepts a suggestion.
Payload

The payload object of this event has the following properties:

Name suggestion
Description

The suggestion which is was accepted by the user
Type string
Event tui-search.used_suggestion_object
Type publish
Description

Triggers when user accepts a suggestion.
Payload

The payload object of this event has the following properties:

Name suggestion
Description

The suggestion which is was accepted by the user
Event tui-search.input_focus
Type publish
Description

Triggers when user clicks on the input field or otherwise focuses it.
Payload none
Event tui-search.suggestion_update
Type publish
Description

Triggers after query update when updated list of suggestions is available.
Payload

The payload object of this event has the following properties:

Name search
Description

The search settings used to find the suggestions
Type object
Schema { "type": "object", "properties": { "filters": { "type": "object", "properties": { "query": { "type": "string" }, "period": { "type": "object", "properties": { "start": { "type": "string" }, "end": { "type": "string" } }, "required": [ "start", "end" ], "additionalProperties": false }, "duration": { "type": "object", "properties": { "min": { "type": "number" }, "max": { "type": "number" } }, "required": [ "min", "max" ], "additionalProperties": false }, "travellers": { "description": "A set of rooms used to group travellers", "type": "array", "items": { "description": "A set of travellers grouped by room", "type": "array", "items": { "type": "object", "properties": { "type": { "type": "string" }, "age": { "type": "number" } }, "required": [ "type" ], "additionalProperties": false }, "minItems": 1 }, "minItems": 1 } }, "required": [ "query", "period", "duration", "travellers" ], "additionalProperties": false } }, "required": [ "filters" ], "additionalProperties": false }
Name suggestions
Description

The suggestions which do result from the query
Type object
Schema { "$schema": "http://json-schema.org/draft-04/schema#", "id": "IApiDestinationResponse", "type": "object", "properties": { "bestMatch": { "$ref": "#/definitions/IElasticSearchDestinationBestMatch" }, "cities": { "$ref": "#/definitions/IElasticSearchDestination" }, "hotels": { "$ref": "#/definitions/IElasticSearchDestination" }, "countries": { "$ref": "#/definitions/IElasticSearchDestination" }, "regions": { "$ref": "#/definitions/IElasticSearchDestination" } }, "required": [ "bestMatch", "cities", "hotels", "countries", "regions" ], "additionalProperties": false, "definitions": { "IElasticSearchDestinationBestMatch": { "id": "IElasticSearchDestinationBestMatch", "type": "object", "properties": { "type": { "type": "string" }, "text": { "type": "string" }, "highlight": { "type": "string" }, "giataId": { "type": "number" }, "groupId": { "type": "number" }, "score": { "type": "number" } }, "required": [ "type", "text", "highlight", "score" ], "additionalProperties": false }, "IElasticSearchDestination": { "id": "IElasticSearchDestination", "type": "object", "properties": { "text": { "type": "string" }, "highlight": { "type": "string" }, "giataId": { "type": "number" }, "groupId": { "type": "number" }, "score": { "type": "number" } }, "required": [ "text", "highlight", "score" ], "additionalProperties": false }, "ISearch": { "id": "ISearch", "type": "object", "properties": { "filters": { "type": "object", "properties": { "query": { "type": "string" }, "period": { "type": "object", "properties": { "start": { "type": "string" }, "end": { "type": "string" } }, "required": [ "start", "end" ], "additionalProperties": false }, "duration": { "type": "object", "properties": { "min": { "type": "number" }, "max": { "type": "number" } }, "required": [ "min", "max" ], "additionalProperties": false }, "travellers": { "description": "A set of rooms used to group travellers", "type": "array", "items": { "description": "A set of travellers grouped by room", "type": "array", "items": { "type": "object", "properties": { "type": { "type": "string" }, "age": { "type": "number" } }, "required": [ "type" ], "additionalProperties": false }, "minItems": 1 }, "minItems": 1 } }, "required": [ "query", "period", "duration", "travellers" ], "additionalProperties": false } }, "required": [ "filters" ], "additionalProperties": false } } }