在 ng-select 中添加搜索图标占位符而不是占位符文本？

Question

我正在使用 ng-select 库在我的 Angular Web 应用程序中显示下拉菜单。

    <ng-select
      [items]="flattenedSelectList"
      bindLabel="displayName"
      placeholder="Select specialty"
      notFoundText="No results found. Please try a different search criteria."
      bindValue="id"
      [searchFn]="onSearch"
      groupBy="type"
      [(ngModel)]="selectedSpecialtyId">
      <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
        <span [ngOptionHighlight]="search" [title]="item.displayName">
        {{item.displayName}}
        </span>
        <div class='provider-specialty' *ngIf="shouldShowDepartmentName(item)">
          {{getAreasOfExpertise(item)}}
        </div>
      </ng-template>
    </ng-select>

我想在搜索框中放置一个搜索图标，而不是占位符文本“选择专业”。我怎样才能做到这一点？

Answer 1

ng-select中的占位符在div 标签中呈现，并分配了ng-placeholder类。您可以做一些 css 来在占位符中添加搜索图标而不是文本。

像这样的东西。

  .custom ::ng-deep .ng-placeholder::before{
       font-family: FontAwesome;
       content: "\f002";
}

我使用了FontAwesome字体库，并在 content 属性中给出了搜索图标代码（确保您的项目中引用了该库（或任何其他库材料设计、主题等））。（您可以使用自定义图标、png、jpg 作为背景，无论您喜欢什么方法）。

我的 ng-select 元素看起来像这样

       <ng-select [items]="flattenedSelectList" class="custom" ...></ng-select>

请注意，我现在 ng-select 元素中没有占位符属性。

希望能帮助到你。

谢谢。