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

Question

我正在使用ng选择库在我的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标记内呈现，并分配了g类占位符。你可以做一些css在占位符中添加搜索图标，而不是文本。

像这样的东西。

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

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

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

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

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

希望能有所帮助。

谢谢。