antocomplete 实现省市联动以及输入本文

其实本身联动下拉框是个很简单的活，但是业务提了个要求，就是要允许输入下拉框选项里没有的内容，不接受反驳。

 

1，新建省市通用组件 AutocompleteProviceCityComponent

<input placeholder="" [(ngModel)]="defaultValue" nz-input (focus)="onInput($event)" (input)="onInput($event)" (ngModelChange)="onValueChange()" [nzAutocomplete]="sourceAuto"  />

<nz-autocomplete [compareWith]="compareWith" nzBackfill #sourceAuto>

    <nz-auto-option *ngFor="let option of options" [nzValue]="option.value" [nzLabel]="option.key">

        {{ option.key }}

      </nz-auto-option>

</nz-autocomplete>

 

export class AutocompleteProviceCityComponent implements OnInit {

  @Input('sourceList') sourceList: any[];//省或市的集合

  options: any[] = [];

  @Input('defaultValue') defaultValue :string;//文本值

  @Output() changeValueEvent=new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {

  }

  onInput(e: Event): void {

    const value = (e.target as HTMLInputElement).value;

    this.options = this.sourceList.filter(s => s.key.indexOf(value) > -1);

  }

  onValueChange(){

    this.changeValueEvent.emit(this.defaultValue);

  }

  compareWith = (o1: any | string, o2: any): boolean => {

    if (o1) {

      return o2.indexOf(o1) > -1;

    } else {

      return false;

    }

  };

}

2，外层操作逻辑

<app-autocomplete-provice-city (changeValueEvent)="getProvince($event)"   [defaultValue]="province" [sourceList]="listOfProvice"></app-autocomplete-provice-city>

 

 <app-autocomplete-provice-city (changeValueEvent)="getCity($event)"   [defaultValue]="city" [sourceList]="listOfCity"></app-autocomplete-provice-city>

getProvince(province: any) {
this.queryCities(province);
}

getCity(city: any) {
this.confirmBank.city = city;
}

 

 queryCities(province: string) {

    if (!province) return;

    this.province = province;

    this.city = '';

    this.service.getCityList(province).subscribe((ret) => {

      if (ret) {

        this.listOfCity = ret;

        this.listOfCity.forEach(element => {

          element.key = element.key.substring(element.key.lastIndexOf('_') + 1, element.key.length)

        });

      }

    });

  }