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
  • Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the ui5-search component
  • 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​

popupMode​

DescriptionDefines the visualisation mode of the search component.
Type"Illustration" | "List" | "Loading"
Default"List"

noTypeahead​

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

headerText​

DescriptionDefines the header text to be placed in the search suggestions popup.
Typestring
Default""

subheaderText​

DescriptionDefines the subheader text to be placed in the search suggestions popup.
Typestring
Default""

showPopupAction​

DescriptionDefines whether the popup footer action button is shown. Note: The footer action button is displayed only when the popupMode is set to List.
Typeboolean
Defaultfalse

popupActionText​

DescriptionDefines the popup footer action button text.
Typestring
Default""

open​

DescriptionIndicates whether the items picker is open.
Typeboolean
Defaultfalse

mode​

DescriptionDefines the mode of the component.
Type"Default" | "Scoped"
Default"Default"

showClearIcon​

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

expanded​

DescriptionDefines whether the component is expanded.
Typeboolean
Defaultfalse

fixed​

DescriptionDetermines whether the component is in a fixed state that is not expandable/collapsible by user interaction.
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

Slots​

default​

DescriptionDefines the Search suggestion items.
TypeArray<SearchItem>

illustration​

DescriptionDefines the illustrated message to be shown in the popup.
TypeHTMLElement

scopeOptions​

DescriptionDefines the component scope options.
TypeArray<ISearchFieldScopeOption>

Events​

DescriptionFired when load more button is pressed.
TypeCustomEvent
BubblesNo
CancelableNo

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 filtering per user input, typeahead and highlighting suggestions per user input.