PrimeNG Angular 10 - 如何在 p-autoComplete 中添加图标

Answer 1

PrimeNg 提供了 InputGroup 选项，可用于添加输入图标。

<div class="p-mr-2 p-input">
  <div class="p-inputgroup">
    <span class="p-inputgroup-addon">$</span>
    <p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location [suggestions]="results" field="name" placeholder="Search location"> 
    </p-autoComplete>
  </div>
</div>

在这里而不是

$

添加所需的位置图标。

Answer 2

有一个 Property “dropdownIcon” 采用默认图标的名称 “pi pi-V 形向下”。

 <p-autoComplete
              [group]="true"
              field="label"
              [multiple]="true"
              [dropdown]="true"
              dropdownIcon="pi pi-search"
            >

Answer 3

试试这个；测量结果只是一个例子：

<div
    id="searchGroup"
    class="inner-inline-group"
  >
    <i class="pi pi-search search-icon"></i>
    <p-autoComplete
      id="searchInput"
      [style]="{ width: '98%', position: 'static' }"
    ></p-autoComplete>
  </div>

在组件CSS中：

.search-icon {
  z-index: 1;
  position: relative;
  left: 41px;
  top: 9px;
  align-self: center;
}

在全局styles.css中：

 .p-autocomplete-input {
  padding-left: 33px;
}