Use nzAutocompleteOrigin and nzAutocompleteConnectedTo to specify the origin of the autocomplete overlay. The overlay position and default width are based on the origin element.

      Loading...

22.1.0

Lookup-Patterns - Certain Category

Demonstration of Lookup Patterns: Certain Category.

      Loading...

Status

Add status to AutoComplete with nzStatus, which could be error or warning.

      Loading...

Use option with object type

Use compareWith(SelectControlValueAccessor) when the nzValue and ngModel type is object.

      Loading...

Customize Input Component

      Loading...

Non-case-sensitive AutoComplete

A non-case-sensitive AutoComplete

      Loading...

Lookup-Patterns - Uncertain Category

Demonstration of Lookup Patterns: Uncertain Category.

      Loading...

Variants

Variant is supported out of the box by using nz-input and setting nzVariant to outlined, underlined, filled and borderless

      Loading...

API#

<input nz-input [(ngModel)]="value" [nzAutocomplete]="auto" />
<nz-autocomplete [nzDataSource]="['12345', '23456', '34567']" #auto></nz-autocomplete>

<input nz-input [(ngModel)]="value" [nzAutocomplete]="auto" />
<nz-autocomplete #auto>
  <nz-auto-option [nzValue]="'12345'">12345</nz-auto-option>
  <nz-auto-option [nzValue]="'23456'">23456</nz-auto-option>
  <nz-auto-option [nzValue]="'34567'">34567</nz-auto-option>
</nz-autocomplete>

[nzAutocomplete]directive#

Property	Description	Type	Default	Version
`[nzAutocomplete]`	used to bind `nzAutocomplete` components	`NzAutocompleteComponent`	-
`[nzAutocompleteConnectedTo]`	element relative to which the autocomplete panel is positioned	`NzAutocompleteOriginDirective`	autocomplete trigger	22.1.0

[nzAutocompleteOrigin]directive#

Directive applied to an element to make it usable as the origin of an autocomplete panel.

nz-autocompletecomponent#

Property	Description	Type	Default	Version
`[nzBackfill]`	backfill selected item the input when using keyboard	`boolean`	`false`
`[nzDropdownMatchSelectWidth]`	Whether dropdown's width is same width than select.	`boolean`	`true`	22.1.0
`[nzDataSource]`	Data source for autocomplete	`AutocompleteDataSource`	-
`[nzDefaultActiveFirstOption]`	Whether active first option by default	`boolean`	`true`
`[nzWidth]`	Custom width, unit px	`number`	trigger element width
`[nzOverlayClassName]`	Class name of the dropdown root element	`string`	-
`[nzOverlayStyle]`	Style of the dropdown root element	`object`	-
`[compareWith]`	Same as SelectControlValueAccessor	`(o1: any, o2: any) => boolean`	`(o1: any, o2: any) => o1===o2`

nz-auto-optioncomponent#

Property	Description	Type	Default
`[nzValue]`	bind ngModel of the trigger element	`any`	-
`[nzLabel]`	display value of the trigger element	`string`	-
`[nzDisabled]`	disabled option	`boolean`	`false`

FAQ#

Q: The overlay layer element does not follow the scroll position when scrolling#

By default, the overlay layer element uses body as the scroll container. If using another scroll container, add the CdkScrollable directive to the custom scroll container element. Note: You need to import the CdkScrollable directive or ScrollingModule module from @angular/cdk/scrolling.