mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
f20b78a2c5
* [AAE-534] - add search cloud component * change doc file * more changes on doc file * remove empty scss file * add animation and more customizations * add preselect value property * fix unit tests * [AAE-534] Search - extract search text input from SearchControlComponent * rename component and fix build * fix import scss and lint * change in doc files * PR changes * more changes * add return type * fix unit test
50 lines
2.5 KiB
Markdown
50 lines
2.5 KiB
Markdown
---
|
|
Title: Search Text Input Component
|
|
Added: v3.6.0
|
|
Status: Active
|
|
Last reviewed: 2019-11-06
|
|
---
|
|
|
|
# [Search Text Input Component](../../../lib/core/search-text/search-text-input.component.ts "Defined in search-text-input.component.ts")
|
|
|
|
Displays a input text that supports autocompletion
|
|
|
|
|
|
|
|
## Basic Usage
|
|
|
|
```html
|
|
<adf-search-text-input
|
|
[expandable]="true"
|
|
[autocomplete]="autocomplete"
|
|
[liveSearchEnabled]="liveSearchEnabled"
|
|
(searchChange)="onSearchChanged($event)">
|
|
</adf-search-text-input>
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
| ---- | ---- | ------------- | ----------- |
|
|
| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
|
|
| expandable | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
|
|
| highlight | `boolean` | false | Toggles highlighting of the search term in the results. |
|
|
| inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). |
|
|
| liveSearchEnabled | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches. |
|
|
| searchAutocomplete | [`SearchTriggerDirective`](../../../lib/core/search-text/search-trigger.directive.ts) | null | Trigger autocomplete results on input change |
|
|
| searchTerm | `string` | empty | Preselected search widget value |
|
|
| debounceTime | `number` | 0 | Debounce time in miliseconds |
|
|
| focusListener | [`Observable`](http://reactivex.io/documentation/observable.html) `<` [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) `>` | null | Listener for results-list events (focus, blur and focusout) |
|
|
| defaultState | [`SearchTextStateEnum`](../../../lib/core/models/search-text-input.model.ts) | collapsed | Default state of the search widget |
|
|
|
|
### Events
|
|
|
|
| Name | Type | Description |
|
|
| ---- | ---- | ----------- |
|
|
| searchChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when search widget value is changed. |
|
|
| submit | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when search widget is submited. |
|
|
| selectResult | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the result list is selected |
|
|
| reset | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the search widget is reseted |
|
|
| reset | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the search widget is reseted | |