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

【问题标题】：Search multi select dropdown angular 4 and material 2搜索多选下拉角 4 和材料 2
【发布时间】：2018-08-04 01:42:19
【问题描述】：

您好，我使用的是角度 4 和材质 2。我有一个带有多选选项的下拉菜单。我可以使用多选选项显示下拉菜单。现在我想在选择下拉列表中实现搜索/过滤选项。您能否让我知道，有什么方法可以在 material2 中实现这一点，或者我需要实现自己的可搜索组件？有没有类似的东西？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

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

你可以看演示here。

来自issue 5697 of the Angular Material Github，看起来他们想将其添加到官方 Angular 材料仓库中，但现在我们必须使用这个外部包。

【讨论】：

【解决方案2】：

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

<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

【讨论】：

看起来不错 - 在selectFormControl.value?.length > 1 行中，?. 有什么作用？
事实证明，如果您的过滤器文本由于mat-select 中的键盘可访问性内容而包含空格，则此解决方案不起作用。我将(keydown)="$event.stopPropagation()" 放在第一个mat-optgroup（在搜索字段周围），这解决了问题
希望我能为这个解决方案投很多票！谢谢

【解决方案3】：

试试这个：

<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>

【讨论】：

我正在使用，是否适用？
可能，不确定：npmjs.com/package/md2-select，你可以这样做

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

是的，我即将实现这一点。 stackblitz.com/edit/…