Search bar¶

The search bar allows users to quickly find content using free text.

Usage ---¶

When to use¶

Use it if a full text search is required.

Best practices¶

Ignore punctuation within searches.
Combine with the typeahead behavior to assist users when searching.
Don't use wildcard encoding for more complex search statements.
Consider adding other search capabilities according to project needs (e.g. use quotes to search for exact matches).
The placement of the Search Bar depends on the layout of the viewport. See the list-details for placement guidance. See data table for search placement within a data table.

Design ---¶

Elements¶

Search icon, 2. Content, 3. Container, 4. Clear button

Interaction states¶

The search bar container color should always be in contrast with its surrounding background. Use base-4 or base-1 accordingly.

Code ---¶

It has a callback, which can be seen in example as call to getData(), which triggers every time a user has interaction with search bar. It also includes the actual search term.

Input [debounceTime] is the wait time in ms for the search bar to notify changes after a user stops typing. (Type: number, Default value: 400).

Input [showIcon] defines if a search icon is displayed (false by default).

Usage¶

import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';

@Component({
  imports: [SiSearchBarComponent, ...]
})

Search Bar - Input Value¶

Modify input value by setting value.