@stratio/egeo
Version:
56 lines (44 loc) • 4.01 kB
Markdown
# 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
```html
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>
```