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

collapsed​

DescriptionDefines whether the component is collapsed.
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

searchIconTooltip​

DescriptionDefines the tooltip of the search icon component.
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>

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 shows Search Message Area, Search Action, filtering per user input, typeahead and highlighting suggestions per user input.