Search
FUISearchBar
Intro
The search pattern is used to locate information or objects within a large collection of values. There are two types of search.
Search on compact (left) and regular (right)
Loading State
After the user types in their search query, the loading state will be displayed through skeleton loading while the search results are loading.
Search loading state
Empty State
The empty state displays an error message if there are no matching search results.
Search empty/failure state
Recent Searches
Recent search history can be displayed when the user is ready to enter their search query. This provides easy access with quick links to previous searches in case the user wants to repeat a recent search.
Recent search history during active state
Search Suggestions and Bolded Exact Match
As users type in their search query, matching or relevant search results/search suggestions through bolded exact match show up to provide them with quick links to relevant search results.
Search suggestions with bolded exact matches
Search with Quick Filter
Search may be used in conjunction with the quick filter bar to help filter search results and narrow search results down.
Quick filter search
Search to Select
The search to select component is used to select multiple values while searching in a large collection of items. Its functionality is similar to a multi-select list picker but the selected values are located within the search field instead. To learn more, see List Picker and Search to Select.
Search to select
Development: FUISearchBar
SAP Fiori for Android: Search
Your feedback has been sent to the SAP Fiori design team.