CODEWITHSUNDEEP
angularangular-material
Sireesh
Sireesh

Reputation: 69

how to apply search on mat-select options

I was trying to apply search to mat-select options.

<mat-form-field>
    <mat-select [formControl]="country" placeholder="Select Country" #countrySelect>
        <mat-option *ngFor="let country of countries.Countries" [value]="country.CountryName">
            {{country.CountryName}}
        </mat-option>
    </mat-select>
</mat-form-field>

[
   {
      "Countries":[
         {
            "id":0,
            "CountryName":"Indonesia",
            "States":[
               {
                  "id":0,
                  "StateName":"Bali",
                  "Cities":[
                     {
                        "id":0,
                        "CityName":"Denpasar",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun1"
                           },
                           {
                              "id":1,
                              "MunName":"Mun2"
                           },
                           {
                              "id":2,
                              "MunName":"Mun3"
                           }
                        ]
                     },
                     {
                        "id":1,
                        "CityName":"Kuta",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun4"
                           },
                           {
                              "id":1,
                              "MunName":"Mun5"
                           },
                           {
                              "id":2,
                              "MunName":"Mun6"
                           }
                        ]
                     },
                     {
                        "id":2,
                        "CityName":"Tuban",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun7"
                           },
                           {
                              "id":1,
                              "MunName":"Mun8"
                           },
                           {
                              "id":2,
                              "MunName":"Mun9"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":1,
                  "StateName":"Badgis",
                  "Cities":[
                     {
                        "id":0,
                        "CityName":"Denpasar",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun1"
                           },
                           {
                              "id":1,
                              "MunName":"Mun2"
                           },
                           {
                              "id":2,
                              "MunName":"Mun3"
                           }
                        ]
                     },
                     {
                        "id":1,
                        "CityName":"Andarab",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun4"
                           },
                           {
                              "id":1,
                              "MunName":"Mun5"
                           },
                           {
                              "id":2,
                              "MunName":"Mun6"
                           }
                        ]
                     }
                  ]
               }
            ]
         },
         {
            "id":1,
            "CountryName":"India",
            "States":[
               {
                  "id":0,
                  "StateName":"Delhi",
                  "Cities":[
                     {
                        "id":0,
                        "CityName":"Sonipat",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun1"
                           },
                           {
                              "id":1,
                              "MunName":"Mun2"
                           },
                           {
                              "id":2,
                              "MunName":"Mun3"
                           }
                        ]
                     },
                     {
                        "id":1,
                        "CityName":"Rohtak",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun4"
                           },
                           {
                              "id":1,
                              "MunName":"Mun5"
                           },
                           {
                              "id":2,
                              "MunName":"Mun6"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":1,
                  "StateName":"Karnataka",
                  "Cities":[
                     {
                        "id":0,
                        "CityName":"Mangalore",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun1"
                           },
                           {
                              "id":1,
                              "MunName":"Mun2"
                           },
                           {
                              "id":2,
                              "MunName":"Mun3"
                           }
                        ]
                     },
                     {
                        "id":1,
                        "CityName":"Hubli",
                        "Municipalities":[
                           {
                              "id":0,
                              "MunName":"Mun4"
                           },
                           {
                              "id":1,
                              "MunName":"Mun5"
                           },
                           {
                              "id":2,
                              "MunName":"Mun6"
                           }
                        ]
                     }
                  ]
               }
            ]
         }
      ]
   }
]

Upvotes: 1

Views: 9559

Answers (2)

Matt Walterspieler
Matt Walterspieler

Reputation: 2171

I would suggest you to use mat-autocomplete instead. I don't think it's possible to natively search with mat-select. mat-option can be collected into groups using the mat-optgroup element:

<mat-autocomplete #auto="matAutocomplete">
  <mat-optgroup *ngFor="let group of filteredGroups | async" [label]="group.name">
    <mat-option *ngFor="let option of group.options" [value]="option">
      {{option.name}}
    </mat-option>
  </mat-optgroup>
</mat-autocomplete>

Autocomplete doc: https://material.angular.io/components/autocomplete

Upvotes: 4

Liviu Nita
Liviu Nita

Reputation: 96

I hope to help you with this: ngx mat select search

<mat-form-field>
  <mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
    <mat-option>
      <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
    </mat-option>
    <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
      {{bank.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Please, check this links :

https://www.npmjs.com/package/ngx-mat-select-search

https://stackblitz.com/edit/mat-select-search

Upvotes: 1

Related Questions