search-text-input.component.md

Title	Added	Status	Last reviewed
Search Text Input Component	v3.6.0	Active	2019-11-06

• Search Text Input Component

Displays a input text that supports autocompletion

Basic Usage

<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.
collapseOnBlur	boolean	true	Toggles whether to collapse the search on blur.
collapseOnSubmit	boolean	true	Collapse search bar on submit.
debounceTime	number	0	Debounce time in milliseconds.
defaultState	SearchTextStateEnum		Default state expanded or Collapsed.
expandable	boolean	true	Toggles whether to use an expanding search control. If false then a regular input is used.
focusListener	Observable<FocusEvent>		Listener for results-list events (focus, blur and focusout).
hintLabel	string	""	Hint label
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.
placeholder	string	""	Placeholder text to show in the input field
searchAutocomplete	any	false	Trigger autocomplete results on input change.
searchTerm	string	""	Search term preselected
showClearButton	boolean	false	Toggles whether to show a clear button that closes the search

Events

Name	Type	Description
reset	EventEmitter<boolean>	Emitted when the result list is reset
searchChange	EventEmitter<string>	Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is less than three characters in length then it is truncated to an empty string.
searchVisibility	EventEmitter<boolean>	Emitted when the search visibility changes. True when the search is active, false when it is inactive
selectResult	EventEmitter<any>	Emitted when the result list is selected
submit	EventEmitter<any>	Emitted when the search is submitted by pressing the ENTER key. The search term is provided as the value of the event.