mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-16 17:54:59 +00:00
d70f689e06
* ACS-5183 Created component which displays form to search nodes by file type and size * ACS-5183 Validate proper value in number input and allow to use custom file types * ACS-5183 Corrected problem with styles, case insensitive compare for extensions * ACS-5183 Added translations, styles for selecting type, proper comparator for types * ACS-5183 Prevent adding custom file type when selecting existing one * ACS-5183 Corrected bytes for each file size unit and clear number input when value is incorrect * ACS-5183 Added documentation for search properties component, updated documentation for search chip autocomplete input and taking values from settings * ACS-5183 Unit tests * ACS-5183 Added automation ids * ACS-5183 Added missing license header * ACS-5183 Fixed lint issues * ACS-5183 Fixed build issue
57 lines
3.3 KiB
Markdown
57 lines
3.3 KiB
Markdown
---
|
|
Title: Search Chip Autocomplete Input component
|
|
Added: v6.1.0
|
|
Status: Active
|
|
Last reviewed: 2023-06-13
|
|
---
|
|
|
|
# [Search Chip Autocomplete Input component](../../../lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts "Defined in search-chip-autocomplete-input.component.ts")
|
|
|
|
Represents an input with autocomplete options.
|
|
|
|
|
|
|
|
## Basic usage
|
|
|
|
```html
|
|
<adf-search-chip-autocomplete-input
|
|
[autocompleteOptions]="allOptions"
|
|
[onReset$]="onResetObservable$"
|
|
[allowOnlyPredefinedValues]="allowOnlyPredefinedValues"
|
|
(optionsChanged)="onOptionsChange($event)">
|
|
</adf-search-chip-autocomplete-input>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
|---------------------------|--------------------------|----|-----------------------------------------------------------------------------------------------|
|
|
| autocompleteOptions | `string[]` | [] | Options for autocomplete |
|
|
| onReset$ | [`Observable`](https://rxjs.dev/guide/observable)`<void>` | | Observable that will listen to any reset event causing component to clear the chips and input |
|
|
| allowOnlyPredefinedValues | boolean | true | A flag that indicates whether it is possible to add a value not from the predefined ones |
|
|
| placeholder | string | 'SEARCH.FILTER.ACTIONS.ADD_OPTION' | Placeholder which should be displayed in input. |
|
|
| compareOption | (option1: string, option2: string) => boolean | | Function which is used to selected options with all options so it allows to detect which options are already selected. |
|
|
| formatChipValue | (option: string) => string | | Function which is used to format custom typed options. |
|
|
| filter | (options: string[], value: string) => string[] | | Function which is used to filter out possibile options from hint. By default it checks if option includes typed value and is case insensitive. |
|
|
|
|
### Events
|
|
|
|
| Name | Type | Description |
|
|
| ---- | ---- |-----------------------------------------------|
|
|
| optionsChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string[]>` | Emitted when the selected options are changed |
|
|
|
|
## See also
|
|
|
|
- [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
|
|
- [Search Query Builder service](../services/search-query-builder.service.md)
|
|
- [Search Widget Interface](../interfaces/search-widget.interface.md)
|
|
- [Search Filter Autocomplete Chips component](search-filter-autocomplete-chips.component.md)
|
|
- [Search Logical Filter component](search-logical-filter.component.md)
|
|
- [Search check list component](search-check-list.component.md)
|
|
- [Search date range component](search-date-range.component.md)
|
|
- [Search number range component](search-number-range.component.md)
|
|
- [Search radio component](search-radio.component.md)
|
|
- [Search slider component](search-slider.component.md)
|
|
- [Search text component](search-text.component.md)
|
|
- [Search Chip Input component](search-chip-input.component.md)
|