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

Question

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

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

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

Answer 1

ng-select 中的占位符在 div 标签 中呈现 class ng-placeholder 已分配。您可以 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 元素中没有占位符属性。

希望对您有所帮助。

谢谢。

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

Add a search icon placeholder inside ng-select instead of placeholder text?

angular-ngselect

angular