Skip to main content

Search

<ui5-search> | Since 2.9.0
info

The following entity is available under an experimental flag and its API and behavior are subject to change.

A ui5-search is an input with suggestions, used for user search.

The ui5-search consists of several elements parts:

  • Scope - displays a select in the beggining of the component, used for filtering results by their scope.
  • Input field - for user input value
  • Clear button - gives the possibility for deleting the entered value
  • Search button - a primary button for performing search, when the user has entered a search term
  • Suggestions - a list with available search suggestions

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/Search.js";

Basic Sample​

A Search component with enabled scope and items and filtering by scope.

Properties​

loading​

DescriptionIndicates whether a loading indicator should be shown in the popup.
Typeboolean
Defaultfalse

noTypeahead​

DescriptionDefines whether the value will be autcompleted to match an item.
Typeboolean
Defaultfalse

open​

DescriptionIndicates whether the items picker is open.
Typeboolean
Defaultfalse

showClearIcon​

DescriptionDefines whether the clear icon of the search will be shown.
Typeboolean
Defaultfalse

value​

DescriptionDefines the value of the component.
Note: The property is updated upon typing.
Typestring
Default""

placeholder​

DescriptionDefines a short hint intended to aid the user with data entry when the component has no value.
Typestring | undefined
Defaultundefined

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined

accessibleDescription​

DescriptionDefines the accessible ARIA description of the field.
Typestring | undefined
Defaultundefined

Slots​

default​

DescriptionDefines the Search suggestion items.
TypeArray<SearchItem | SearchItemGroup>

action​

DescriptionDefines the popup footer action button.
TypeArray<Button>

illustration​

DescriptionDefines the illustrated message to be shown in the popup.
TypeArray<IllustratedMessage>

messageArea​

DescriptionDefines the illustrated message to be shown in the popup.
TypeArray<SearchMessageArea>

scopes​

DescriptionDefines the component scope options.
TypeArray<ISearchScope>

filterButton​

DescriptionDefines the filter button slot, used to display an additional filtering button. This slot is intended for passing a ui5-button with a filter icon to provide extended filtering options.
Note: Scope button and Filter button are mutually exclusive.
TypeArray<Button>
Since2.11.0

Events​

open​

DescriptionFired when the popup is opened.
TypeCustomEvent
BubblesNo
CancelableNo

close​

DescriptionFired when the popup is closed.
TypeCustomEvent
BubblesNo
CancelableNo

input​

DescriptionFired when typing in input or clear icon is pressed.
TypeCustomEvent
BubblesYes
CancelableNo

scope-change​

DescriptionFired when the scope has changed.
TypeCustomEvent<SearchFieldScopeSelectionChangeDetails>
Parametersscope: HTMLElement
The newly selected scope
BubblesYes
CancelableNo
DescriptionFired when the user has triggered search with Enter key or Search Button press.
TypeCustomEvent
BubblesYes
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Filtering​

The examples show the search message area, the search action, filtering per user input, typeahead and highlighting suggestions per user input.

Advanced Filtering Button​

This example shows how to use a custom advanced filtering button via the filterButton slot.

Byline items​

The example shows how to display byline items with an image and description.

Show More Item​

This example shows how to use a Show More Item.