[英]Search multi select dropdown angular 4 and material 2
嗨,我正在使用 angular 4 和 material 2。我有一個帶有多選選項的下拉列表。 我可以使用多選選項顯示下拉列表。 現在我想在選擇下拉列表中實現搜索/過濾選項。 您能否讓我知道,有沒有辦法在 material2 中實現這一點,或者我需要實現自己的可搜索組件? 有沒有類似< mat-select-header >的東西?
搜索文本框已添加到過濾器選擇框內
<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
試試這個:
<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>
有一個官方的 npm 包旨在實現這一點,稱為ngx-mat-select-search
您可以在此處查看演示。
從Angular Material Github 的 issue 5697 來看,他們似乎想將其添加到官方的 angular material repo 中,但現在我們必須使用這個外部包。
目前不支持此功能。 有一個針對“選擇中的搜索/過濾器”和另一個針對“將選擇標頭添加到 md-select”的開放功能請求。 但是,您可以查看此評論,其中包含一個示例,說明如果您不想等待,如何解決該問題。
我認為創建一個答案會非常簡單,一個具有搜索查詢的 matinput,然后在列表包含的項目數組列表上使用一個基本的搜索過濾器管道(我在工作,但當我回家時,我可能寫個例子)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.