Ignite UI for Angular Autocomplete - Documentation
The igxAutocomplete directive provides a way to enhance a text input by showing a drop down of suggested options, provided by the developer.
Example:
<input type="text" [igxAutocomplete]="townsPanel" #autocompleteRef="igxAutocomplete"/>
<igx-drop-down #townsPanel>
<igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
{{town}}
</igx-drop-down-item>
</igx-drop-down> Constructors
Section titled "Constructors"IgxAutocompleteDirective
new IgxAutocompleteDirective(): IgxAutocompleteDirective Returns IgxAutocompleteDirective
Properties
Section titled "Properties"autocompleteSettings
Section titled "autocompleteSettings"Provide overlay settings for the autocomplete drop down
// get
let settings = this.autocomplete.autocompleteSettings;<!--set-->
<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteSettings]="settings"/>// set
this.settings = {
positionStrategy: new ConnectedPositioningStrategy({
closeAnimation: null,
openAnimation: null
})
}; autocompleteSettings: AutocompleteOverlaySettings Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:116
disabled
Section titled "disabled"Enables/disables autocomplete component
// get
let disabled = this.autocomplete.disabled;<!--set-->
<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteDisabled]="disabled"/>// set
public disabled = true; disabled: boolean = false Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:143
dropdown
Section titled "dropdown"Inherited from: IgxDropDownItemNavigationDirective
dropdown: IgxDropDownBaseDirective Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:15
selectionChanging
Section titled "selectionChanging"Emitted after item from the drop down is selected
<input igxInput [igxAutocomplete]="townsPanel" (selectionChanging)='selectionChanging($event)' /> selectionChanging: EventEmitter<AutocompleteSelectionChangingEventArgs> Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:153
target
Section titled "target"target: IgxDropDownComponent Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:87, projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:90
Accessors
Section titled "Accessors"activeDescendant
Section titled "activeDescendant"Inherited from: IgxDropDownItemNavigationDirective
get activeDescendant(): string Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down-navigation.directive.ts:57
Returns string
Methods
Section titled "Methods"close
Section titled "close"Closes autocomplete drop down
close(): void Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:292
Returns void
ngAfterViewInit
Section titled "ngAfterViewInit"A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit(): void Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:332
Returns void
Opens autocomplete drop down
open(): void Defined in projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts:303