我想在我的多重选择下拉菜单中添加搜索功能。 我已经在Jquery中完成了此操作，但我想在Angular材质中执行相同的操作。 这是设计图片。 Here is the image
jjjjcccchhhh 回答：在多角形材料的多重选择中添加搜索功能
中尝试此示例
stackblitz example with angular 8
在您的html文件中
<h2>Multiple selection</h2>
<p>
<mat-form-field>
<mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true">
<mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search>
<mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
{{bank.name}}
</mat-option>
</mat-select>
</mat-form-field>
</p>
<p>
Selected Banks:
</p>
<ul *ngFor="let bank of bankMultiCtrl?.value">
<li>{{bank.name}}</li>
</ul>
问题是材料选择不具有输入功能。因此，您需要做一些CSS才能使其看起来不错。
<mat-select multiple>
<mat-form-field>
<input matInput placeholer="Search" (input)="filterOptione($event.target.value)" />
</mat-form-field>
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-select>
过滤功能：
public filterOptions(filter: string): void {
this.options = this._unfilteredOptions.filter(x => x.toLowerCase().includes(filter.toLowerCase()));
}
使用mat-autocomplete代替使用mat-select。 https://material.angular.io/components/autocomplete/overview
您可以通过在输入为空白时填充所有值，然后在输入值更改时过滤自动完成选项，使其与mat-select相同。
同样，技巧是使输入为空时显示所有可用选项。
希望这会有所帮助。
编辑：
我应该补充一点，我在方程式的多选部分中使用了芯片列表（https://material.angular.io/components/chips/overview）。选择一个选项后，将其添加到芯片列表中，然后可以在每个芯片上添加X图标，以从列表中删除内容。
当然，这是我个人的多项选择输入的风格，但我认为它可能会给您一些想法。