搜索多选下拉角4和材料2

Question

嗨，我使用的是角4和材质2。我在下拉菜单中选择了多个选项。我可以显示带有多选选项的下拉菜单。现在，我想在选择下拉列表中实现搜索/过滤器选项。您能否让我知道，在material2中有什么方法可以实现这一点，还是我需要实现自己的可搜索组件？是否有<mat-select-header>之类的东西？

Answer 1

搜索文本框已添加到过滤器的选择框内

<mat-form-field>
    <mat-select (openedChange)="openedChange($event)" placeholder="selectFormControl" [formControl]="selectFormControl" multiple>
        <mat-select-trigger>
            {{selectFormControl.value ? selectFormControl.value[0] : ''}}
            <span *ngIf="selectFormControl.value?.length > 1" class="additional-selection">
        (+{{selectFormControl.value.length - 1}} {{selectFormControl.value?.length === 2 ? 'other' : 'others'}})
      </span>
    </mat-select-trigger>
    <div class="select-container">
    <mat-optgroup >
  <mat-form-field style="width:100%;">
    <input #search autocomplete="off" placeholder="Search" aria-label="Search" matInput [formControl]="searchTextboxControl">
    <button [disableRipple]="true" *ngIf="search.value" mat-button matSuffix mat-icon-button aria-label="Clear" (click)="clearSearch($event)">
    <mat-icon >close</mat-icon>
  </button>
         </mat-form-field>
    </mat-optgroup>
    <mat-optgroup *ngIf="(filteredOptions | async).length == 0">
      <div>No results found!</div>
    </mat-optgroup>
 <mat-option (optionSelectionChanges)="selectionChange($event)" *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
</div>
</mat-select>
</mat-form-field>

转到以下链接查看实施

https://stackblitz.com/edit/angular-searchable-multiselect-select