Search (Component)

The search component has been designed to allow user to find a specific content according to his needs.

Inputs

Property	Type	Req	Description	Default
debounce	Number	False	Time elapsed in milliseconds before displaying the autocomplete list	0
liveSearch	Boolean	False	Boolean to enable or disable the automatic search while the user is typing	true
minLength	Number	False	Minimum of characters typed by the user before launching the search	0
placeholder	String	False	Text displayed in the search input	'Search'
qaTag	String	False	Label used as id	''
value	String	False	Initial value of the search text	''
disabled	Boolean	False	Boolean to enable or disable the search	false
withAutocomplete	Boolean	False	Enable or disable the autocomplete list when user is typing	false
autocompleteList	StDropDownMenuItem[]	False	List of items displayed in the autocomplete list when user is typing	''
showIcon	Boolean	False	Boolean to hide/show the loupe icon	true
emptyAutocompleteListMessage	String	False	Message displayed when the autocomplete list is enabled but there are not any item with the typed text	''
filterOptions	StDropDownMenuItem[]	False	Options displayed at the filter select. If it is not introduced,filter will not be displayed	''
keyBoardMove	Boolean	False	It is needed to activate navigation through options using the keyboard	false

Outputs

Property	Type	Description
search	Object(filter?: string, text: string)	Event emitted when search is launched. It contains the text typed by the user and the filter value selected (only if filter is displayed)

Example

Search without filters
<st-search [placeholder]="placeholder"
      [qaTag]="qaTag"
      [value]="searched"
      [debounce]="debounceTime"
      [minLength]="minLength"
      (search)="onSearchResult($event)"></st-search>


Search with filters
<st-search [placeholder]="placeholder"
      [qaTag]="qaTag"
      [value]="searched"
      [debounce]="debounceTime"
      [minLength]="minLength"
      [filterOptions]="[
{ label: 'All', value: 1 },
{ label: 'Type ', value: 2 },
{ label: 'Color', value: 3 }
]"
      (search)="onSearchResult($event)"></st-search>