Angular : add a fixed search barch to a mat-select dropdown

Question

I'm using a mat-select widget (of Angular-Material) in my app

I'm implementing a search bar at the top of the select drowpdown to filter options:

 <mat-select placeholder="Selectionner la boutique"
             id="libelleShop">
      <div id="custom-search-input" class="m-1 navbar-fixed-top">
         <input #shopKeyword matInput placeholder="Search"  class="search-input" (keyup)="filterShopsByLibelle(shopKeyword.value)">
       <span class="input-group-btn">
             <button class="btn btn-danger" type="button">
                <span class="glyphicon glyphicon-search"></span>
             </button>
       </span>
      </div>

      <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
                          [value]="shop.edoId">
            {{shop.storeName}}
      </mat-option>
 </mat-select>

My purpose is how to keep the search Bard div (#custom-search-input) fixed on the top.

I've tried position: fixed but it seems to not work

Suggestions ??

better to use auto-complete of material with filter:material.angular.io/components/autocomplete/overview — לבני מלכה
i am stuck with same problem... its not working at all ... i donno how ngx-select-search package owner implemented it.. i looked sourcecode but still not working — minigeek

Seba Cherian Seba Cherian · Accepted Answer · 2019-03-26T06:44:26

Solution 1

<mat-select-search [formControl]="formControlName"></mat-select-search>

Add this tag inside mat-select and follow the steps in app.component.ts of StackBlitz

Solution 2

You can use Autocomplete of Angular material

https://material.angular.io/components/autocomplete/overview

Angular : add a fixed search barch to a mat-select dropdown

1 Answers