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)

Search on compact (left) and regular (right)

Variations

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

Search loading state

Empty State

The empty state displays an error message if there are no matching search results.

Search empty/failure state

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

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 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

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

Search to select

Resources

Development: FUISearchBar

SAP Fiori for Android: Search