时间戳

首页 > 解决方案 > Angular：将固定搜索栏添加到垫选择下拉列表中

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

问题描述

我在我的应用程序中使用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了，但似乎不起作用

建议？？

标签： cssangularflexboxbootstrap-4

解决方案

解决方案 1

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

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

解决方案 2

您可以使用Angular 材料的自动完成功能

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

推荐阅读