angular - 在 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 中的占位符在分配了 ng-placeholder 类的 div 标记 中呈现。您可以使用一些 css 在占位符中添加搜索图标而不是文本。

类似这样的事情。

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

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

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

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

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

希望有帮助。

谢谢。