Angular：将固定搜索barch添加到mat-select下拉列表中

Question

我在我的应用程序中使用了mat-select小部件（Angular-Material）

我正在选择下拉列表顶部实现一个搜索栏来过滤选项：

 <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>

我的目的是如何将搜索Bard div（#custom-search-input）固定在顶部。

我试过position: fixed但它似乎不起作用

建议??

Answer 1

解决方案1

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

在mat-select中添加此标记，然后按照StackBlitz的app.component.ts中的步骤操作

解决方案2

您可以使用角度材质的Autocomplete

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