基于 Angular和Material autocomplete组件再封装的可双向绑定key-value的可输入下拉框

GitHub: https://github.com/Xinzheng-Li/AngularCustomerComponent

为了方便使用，把许多比如ADD的功能去了，可以在使用后自行实现。

效果图：

 

 

 

 

 

调用：

    <app-autocomplete-input [menuItems]="autocompleteInputData" [(model)]="autocompleteInputModel" [showAddBtn]="true"
        [(value)]="autocompleteInputValue" (objectChange)="onChange($event)" (focus)="onFocus($event)"
        (input)="onInput($event)" (change)="onModelChange($event)" (blur)="onBlur($event)"
        #autocompleteInput>app-autocomplete-input>

前端：

<div>
    <input type="text" matInput [formControl]="myControl"
        #autocompleteTrigger="matAutocompleteTrigger" [matAutocomplete]="auto" [placeholder]="placeholder"
        #autocompleteInput maxlength={{maxlength}} (focus)="onFocus($event)" (input)="onInput($event)"
        (change)="onModelChange($event)" (blur)="onBlur($event)">

    <mat-autocomplete #auto="matAutocomplete" #autocomplete isDisabled="true" (optionSelected)="selectedOption($event)"
        [displayWith]="displayFn">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option.label}}
        mat-option>
        <mat-option *ngIf="loading" [disabled]="true" class="loading">
            loading...
        mat-option>
        <mat-option *ngIf="showAddBtn&&inputText!=''" [ngClass]="{'addoption-active':addoptionActive}"
            [disabled]="!addoptionActive" value="(add)" class="addoption">
            + Add <span>{{ inputText?'"'+inputText+'"':inputText }}span>
        mat-option>
    mat-autocomplete>
div>

 

后台：

import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete'
import { Observable, Subject, debounceTime, map, startWith } from 'rxjs';

interface Menu {
  value: any;
  label: string;
}

@Component({
  selector: 'app-autocomplete-input',
  templateUrl: './autocomplete-input.component.html',
  styleUrls: ['./autocomplete-input.component.scss']
})
export class AutocompleteInputComponent implements OnInit {
  @Input() disabled = false;
  @Input() disabledInput = false;
  @Input() placeholder = 'autocompleteInput';
  @Input() maxlength: number = 50;
  @Input() showAddBtn = false;
  @Input() loading = false;
  _menuItems!: Menu[];
  @Input()
  get menuItems() {
    return this._menuItems;
  }
  set menuItems(val) {
    this._menuItems = val;
    if (this.model) {
      let mapItem = this.menuItems.find((x) => x.label?.toLowerCase().trim() == this.model?.trim()?.toLowerCase());
      if (mapItem) {
        this.value = mapItem.value;
      } else {
        this.model = this.value = '';
      }
    }
    this.myControl.setValue(this.model ?? '');
  }

  modelValue: any = { name: '', value: '' };
  @Output() objectChange = new EventEmitter();

  //Only for binding model
  @Output() modelChange = new EventEmitter();
  @Input()
  get model() {
    return this.modelValue?.name?.trim() ?? '';
  }
  set model(val) {
    this.modelValue.name = this.inputText = val?.trim();
    this.modelChange.emit(this.modelValue.name);
    this.inputChangeSubject.next(this.modelValue.name);
  }

  @Output() valueChange = new EventEmitter();
  @Input()
  get value() {
    return this.modelValue.value;
  }
  set value(val) {
    this.modelValue.value = val;
    this.valueChange.emit(this.modelValue.value);
  }

  @Output() inputChange = new EventEmitter();

  myControl = new FormControl('');
  filteredOptions!: Observable;
  @ViewChild('autocompleteInput') autocompleteInput: any;
  @ViewChild('autocomplete') autocomplete!: MatAutocomplete;
  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger!: MatAutocompleteTrigger;

  ngOnInit(): void {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map((value) => {
        const name = typeof value === 'string' ? value : value.label;
        return name ? this._filter(name as string) : this.menuItems.slice();
      })
    );
    this.registEventSubject();
    this.inputText = '';
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['menuItems'] && !changes['menuItems'].firstChange) this.loading = false;
    if (changes['disabled']) {
      this.disabled ? this.myControl.disable() : this.myControl.enable();
    }
    if (changes['value']) {
      let item = this.menuItems.find((x) => x.value == changes['value'].currentValue);
      if (item) {
        this.value = item?.value ?? '';
        this.model = item?.label ?? '';
      }
    }
    if (changes['model']) {
      this.inputText = changes['model'].currentValue ?? '';
      this.myControl.setValue(this.model ?? '');
    }
  }

  private inputChangeSubject = new Subject();
  private registEventSubject() {
    this.inputChangeSubject.pipe(debounceTime(100)).subscribe((data: any) => {
      if (this.loading) return;
      if (this.autocompleteInput?.nativeElement) this.autocompleteInput.nativeElement.value = this.model;
      this.objectChange.emit(this.modelValue);
    });
  }

  private _filter(item: any): any[] {
    const filterValue = item?.toLowerCase()?.trim();
    return this.menuItems.filter((option) => option.label.toLowerCase().includes(filterValue));
  }

  displayFn(e: any) {
    return e && e.label ? e.label : '';
  }
  onFocus(e: any) {
    if (this.disabledInput) e.target.blur();
  }
  @Output() blur = new EventEmitter();
  onBlur(e: any) {
    if (e.currentTarget.value != this.model) {
      this.inputChangeSubject.next(this.model);
    } else {
      this.blur.emit(e);
    }
  }

  inputText = '';
  addoptionActive = false;
  onInput(e: any) {
    if (e.currentTarget.value == '') {
      this.addoptionAction(false);
      this.myControl.setValue('');
    } else if (this.menuItems.find((x) => x.label.toLowerCase() == e.currentTarget.value?.trim()?.toLowerCase())) {
      this.addoptionAction(false);
    } else {
      this.addoptionAction(true);
    }
    this.inputText = e.currentTarget.value;
    e.currentTarget.value = this.inputText = e.currentTarget.value.replaceAll(/[`\\~!@#$%^\*_\+={}\[\]\|;"<>\?]/gi, '');
    if (e.currentTarget.value?.trim() == '') this.myControl.setValue(e.currentTarget.value);
    this.inputChange.emit(e);
  }

  onModelChange(e: any) {
    if (this.loading) return;
    if (e.currentTarget.value?.trim()) {
      let mapItem = this.menuItems.find(
        (x) => x.label.toLowerCase().trim() == e.currentTarget.value?.trim()?.toLowerCase()
      );
      if (mapItem) {
        this.model = e.currentTarget.value = mapItem.label;
        this.value = mapItem.value;
      } else {
        this.model = e.currentTarget.value;
        this.value = '';
      }
    } else {
      this.model = this.inputText = e.currentTarget.value;
      this.value = '';
    }
  }

  selectedOption(e: any) {
    if (typeof e.option.value === 'string') {
      this.autocompleteInput.nativeElement.value = this.inputText;
    } else {
      let mod = e.option.getLabel() ?? '';
      let val = e.option.value?.value ?? '';
      if (val != this.value || mod != this.model) {
        this.model = mod ?? '';
        this.value = val ?? '';
      }
      if (this.value && this.model) {
        this.addoptionActive = false;
      }
    }
  }

  panelAction(type: number) {
    type == 1 ? this.autocompleteTrigger.openPanel() : this.autocompleteTrigger.closePanel();
  }

  addoptionAction(type: boolean) {
    this.addoptionActive = type;
  }

  //It will trigger the change event of the model!
  clearText() {
    this.value = this.model = '';
  }
}

实现逻辑：

原Material的autocomplete控件将下拉框和输入内容分为不同的事件，并且无法自定义下拉选项，像例子中的ADD功能，如果使用原控件，则会将“+ Add XXX”显示到输入框中。

另外就是原控件仅支持显示值绑定，因为输入框是没有key的，故，将输入框和下拉框进行二次封装，实现key-value的双向绑定和自定义选项的功能。

必传参数：

[menuItems]: 下拉框的选项，以value-label的形式定义。

[(model)]: 绑定变量后控件会将输入或下拉选项中的显示值赋到此变量，修改此变量也会更改输入框的值。

[(value)]:  绑定变量后控件会将输入或下拉选项中的实际值赋到此变量，如果是输入不在下拉框的中值，则此变量为空，可以根据需要自行实现生成value值。

 

可选参数：

[disabled]： 是否禁用控件

[disabledInput]： 是否禁止输入（下拉框可用）

[placeholder]： 输入框默认显示值

[maxlength]： 输入框最大长度

[showAddBtn]：是否显示添加项按钮（需要自己实现事件，比如生成个key之后push到menuItems中）

[loading]：当数据源为异步加载时，通过控制此变量来显示等待icon

(objectChange): 修改控件值后触发（选中下拉选项、改变或清空输入框值），输出参数为控件key，value, 由于前面已经对key value进行了双向绑定，事件触发不需要再次进行赋值。

其他事件...

 

其他：
106行：防抖函数0.1秒是因为选择项后会触发两次Change事件（selelctoption+modelChange）

145行：控制输入内容的正则表达式

31/139/154行：输入内容与下拉菜单项匹配，匹配规则可以修改这里控制

panelAction: 打开关闭下拉选项框