Question

嗨我正在使用角度4和材质2.我有一个带有多选选项的下拉菜单。我可以使用多选选项显示下拉列表。现在我想在select下拉列表中实现搜索/过滤器选项。能告诉我，有没有办法在材料2中实现这个目标，或者我需要实现自己的可搜索组件？有没有像＆lt; mat-select-header＆gt;？

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

Answer 2

有一个官方的npm软件包旨在实现这一目标，称为ngx-mat-select-search

您可以观看演示here。

在issue 5697 of the Angular Material Github中，他们似乎想将其添加到正式的棱角材料仓库中，但现在我们必须使用此外部包装。

Answer 3

目前不支持此功能。 "search/filter in select"有一个公开功能请求，"Add select header to the md-select"有另一个请求。但是，您可以查看this评论，其中包含一个示例，说明如果您不想等待它的解决方法。

Answer 4

我认为创建一个答案非常简单，一个matinput有一个搜索查询，然后在列表所包含的项目的数组列表上使用基本搜索过滤器管道（我正在工作，但当我回到家我可以写一个例子）

Answer 5

试试这个：

<md2-select formControlName="some_id"  [multiple]="true">
<md2-select-header class="md2-select-header">
    <input #searchContact name="some_id" class="select-search"
           placeholder="Select Contact">
</md2-select-header>
<md2-option
    *ngFor="let contact of contacts | search:searchContact.value"
    [value]="contact.id">
    {{ user.address1 }}
</md2-option>

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

5 个答案: