我正在使用 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>
我想在搜索框中放置一个搜索图标,而不是占位符文本“选择专业”。我怎样才能实现这一目标?
最佳答案
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 元素中没有占位符属性。
希望有帮助。
谢谢。
关于angular - 在 ng-select 中添加搜索图标占位符而不是占位符文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62796399/