多选自动完成搜索功能 - Angular Material芯片

要实现多选自动完成搜索功能并使用Angular Material芯片，可以按照以下步骤进行：

1. 首先，确保已经安装了Angular Material和Angular CDK库。可以使用以下命令进行安装：

npm install @angular/material @angular/cdk

2. 导入所需的模块。在你的Angular模块中导入MatAutocompleteModule、MatChipsModule和MatFormFieldModule。

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatAutocompleteModule,
    MatChipsModule,
    MatFormFieldModule
  ]
})
export class AppModule { }

3. 在HTML模板中添加表单控件和自动完成输入框。使用mat-form-field包裹，并在其中添加mat-autocomplete指令和matChipInputFor指令。

<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let chip of selectedChips" (removed)="remove(chip)">
      {{chip}}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input type="text" placeholder="选择或输入" [(ngModel)]="chipInput" [matAutocomplete]="auto" [matChipInputFor]="chipList">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="add($event)">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
      {{option}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

4. 在组件中定义所需的属性和方法。添加一个用于保存已选择芯片的数组selectedChips和一个用于保存过滤后选项的数组filteredOptions。

import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedChips: string[] = [];
  filteredOptions: string[] = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  chipInput: string = '';

  add(event: MatAutocompleteSelectedEvent) {
    this.selectedChips.push(event.option.viewValue);
    this.chipInput = '';
  }

  remove(chip: string) {
    const index = this.selectedChips.indexOf(chip);
    if (index >= 0) {
      this.selectedChips.splice(index, 1);
    }
  }
}

5. 最后，为输入框设置过滤函数，以根据用户的输入动态过滤选项。

import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // ...

  filterOptions(event: any) {
    const filterValue = event.target.value.toLowerCase();
    this.filteredOptions = this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

在上述代码中，我们使用ngModel指令来绑定输入框的值，并在add方法中将选中的选项添加到selectedChips数组中。在remove方法中，我们使用indexOf方法找到并删除选定的芯片。

此外，我们还添加了一个filterOptions方法，该方法在每次用户输入时根据输入值动态过滤选项。

通过以上步骤，你就可以实现多选自动完成搜索功能，并使用Angular Material芯片来显示和管理所选的选项。