How to implement search functionality in Mat-Select

Issue

I have a DropDown list and I want that I add a search option there that will search for the name of the industry in my case when the user adds 3 first letter. This is my dropdown:

 <div class="field-wrapper">
<div class="question-wrapper">
  <h3 class="mat-subheading-1">
    What is the main industry where
    your company is active?
  </h3>
</div>
<div class="field-box">

  <mat-form-field formGroupName="industry">
    <mat-select formControlName="id" placeholder="Industry" (selectionChange)="changed($event)">
      <mat-option>None</mat-option>
      <mat-option *ngFor="let item of industries" [value]="item.id">
        {{item.name}}
      </mat-option>
    </mat-select>

    <div
      *ngIf="industryForm.controls.id.invalid && (industryForm.controls.id.dirty || industryForm.controls.id.touched)"
      class="alert alert-danger">
      <mat-error *ngIf="industryForm.controls.id.errors.required">Must fill this field</mat-error>
    </div>
  </mat-form-field>
</div>

The result: if the user writes (Edu) Education will be shown.

Please if anyone has any idea, it would really help me.

stackblitz here

What I want to do is enter link description here just a bit edit I want thaT SEARCH WORKS WHEN USER WRITE 3 LETTERS

Solution

You can use ngx-mat-select-search package to achieve the same:

First Install:

npm install ngx-mat-select-search

In app.module.ts:

import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';

and in imports array:

imports: [
   ....,
   NgxMatSelectSearchModule 
]

HTML Code:

<mat-form-field>
    <mat-select [formControl]="control" ngDefaultControl placeholder="Tags" #Select>
        <ngx-mat-select-search [placeholderLabel]="'Search Item'" [noEntriesFoundLabel]="'No matching records found'" [formControl]="control"
         ngDefaultControl></ngx-mat-select-search>
        <mat-option class="m-t" *ngFor="let obj of filteredRecords | async" [value]="obj">
            {{obj}}
        </mat-option>
    </mat-select>
</mat-form-field>

TS code:

import { takeUntil, take } from 'rxjs/operators';
import { FormGroup, FormControl, Validators } from '@angular/forms'
import { Subject, ReplaySubject } from 'rxjs/Rx';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
import { MatSelect } from '@angular/material/select';


@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample implements OnInit {
  items: any[] = [
    "Agriculture and Mining",
    "Business Services"
    , "Computer and Electronics"
    , "Consumer Services"
    , "Education"
    , "Energy and Utilities"
    , "Financial Services"
    , "Government"
    , "Health, Pharmaceuticals, and Biotech"
  ];


  /** control for the selected bank for multi-selection */
  public control: FormControl = new FormControl();

  private _onDestroy = new Subject<void>();
  public filteredRecords: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);

  @ViewChild('Select') select: MatSelect;

  ngOnInit() {
    this.setInitialValue();
    // set initial selection
    this.control.setValue([]);
    // load the initial bank list
    this.filteredRecords.next(this.items.slice());

    this.control.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterBanksMulti();
      });
  }

  private setInitialValue() {
    this.filteredRecords
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() => {
        this.select.compareWith = (a: any, b: any) => a === b;
      });
  }

  private filterBanksMulti() {
    if (!this.items) {
      return;
    }
    // get the search keyword
    let search = this.control.value;
    if (!search) {
      this.filteredRecords.next(this.items.slice());
      return;
    } else {
      search = search.toLowerCase();
    }
    if (search.length >= 3) {
    // filter the banks
     this.filteredRecords.next(
      this.items.filter(item => item.toLowerCase().indexOf(search) > -1)
     );
    }
  }
}

Working_Demo

Answered By - Prashant Pimpale