Angular：将固定搜索栏添加到垫选择下拉列表中答案

【问题标题】：Angular : add a fixed search barch to a mat-select dropdownAngular：将固定搜索栏添加到垫选择下拉列表中
【发布时间】：2019-08-16 11:30:13
【问题描述】：

我在我的应用中使用 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，但是好像不行

建议？？

【问题讨论】：

更好地使用带有过滤器的自动完成材料：material.angular.io/components/autocomplete/overview
1.固定在什么上面？ 2.如果你有，请向我们展示你的 CSS
我遇到了同样的问题......它根本不起作用......我不知道 ngx-select-search 包所有者是如何实现它的......我查看了源代码但仍然无法正常工作

标签： css angular flexbox bootstrap-4

【解决方案1】：

解决方案 1

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

在mat-select里面添加这个标签，按照StackBlitz的app.component.ts中的步骤操作

解决方案 2

你可以使用Autocomplete的Angular材质

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

【讨论】：