Autocomplete

Input complete automatically.

Data Source

Static

Every filter after data got is filtered by filterOption, data source is from asyncData, enum.

Email postfix is automatically added when it is schema.format: 'email', by default, it is ['qq.com', '163.com', 'gmail.com', '126.com', 'aliyun.com'], can adjust the value by setting enum or global config uiEmailSuffixes

Realtime

Every filter after data got is filtered by filterOption, data source is from asyncData.

Examples

Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { SFAutoCompleteWidgetSchema, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { of } from 'rxjs';

@Component({
  selector: 'form-autocomplete-simple',
  template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`,
})
export class FormAutocompleteSimpleComponent {
  schema: SFSchema = {
    properties: {
      format: {
        type: 'string',
        title: 'Format',
        format: 'email',
      },
      widget: {
        type: 'string',
        title: '指定widget',
        ui: {
          widget: 'autocomplete',
          type: 'email',
        } as SFAutoCompleteWidgetSchema,
      },
      async: {
        type: 'string',
        title: '异步',
        ui: {
          widget: 'autocomplete',
          debounceTime: 100,
          asyncData: input =>
            of(
              input
                ? [
                    { label: input, value: 1, otherData: 1 },
                    { label: input + input, value: 2 },
                  ]
                : [],
            ),
          change: (comp, data) => console.log(comp, data),
        } as SFAutoCompleteWidgetSchema,
        default: 'asdf',
      },
    },
  };

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema

PropertyDescriptionTypeDefault
[enum]Static data sourceSFSchemaEnumType[]-
[readOnly]Read onlyboolean-

ui

PropertyDescriptionTypeDefault
[asyncData]Realtime data(input: string) => Observable<SFSchemaEnumType[]>-
[size]Szie, equals to nzSizestring-
[placeholder]Placeholderstring-
[filterOption]Whether filter by input, by default, only apply to label and filter through indexOf case insensitive. When it's a function, accept inputValue and option parameters, return true when option match search criteria, otherwise, return falseboolean or (inputValue: string, option: SFSchemaEnum) => booleantrue
[type]Mode, automatically complete common email postfix, can set new postfix by setting enumemail-
[debounceTime]debounce time, minimum is 50 by default when it's realtime data source, unit: millisecondnumber0
[defaultActiveFirstOption]Whether active the first item by defaultbooleantrue
[backfill]Fill selected value into input when keyboard selection options is usedbooleanfalse
[nzWidth]Customize width, unit is pxnumberTrigger width of element
[change]Change callback(item: NzAutocompleteOptionComponent, orgData: SFSchemaEnum) => void-