Hi I am using angular 4 and material 2. I have a drop down with multi select options. I am able to display the dropdown with multi select option. Now I want to implement search/filter option in select dropdown. Could you please let me know, Is there any way to achieve this in material2 or I need to implement my own searchable component? Is there any thing like < mat-select-header >?
3
votes
5 Answers
8
votes
Search textbox hasbeen added inside select box for filter
<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>
Go to below link to see implementation
https://stackblitz.com/edit/angular-searchable-multiselect-select
1
votes
Try this:
<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>
1
votes
There's an official npm package that aims to achieve this called ngx-mat-select-search
You can see the demo here.
From issue 5697 of the Angular Material Github, it looks like they want to add this into the official angular material repo, but for now we'll have to make due with this external package.
0
votes
This is not supported at the moment. There is an open feature request for "search/filter in select" and another for "Add select header to the md-select". However, you can take a look at this comment which includes an example of how it can be solved if you don't want to wait.
