如何为 primeng 自动完成占位符提供浮动标签功能？Angular 9 + PrimeNG

Question

所以我用 primeng 的自动完成功能构建了一个下拉菜单，但我遇到了问题。当我单击下拉列表以选择一些数据时，占位符就会消失，但我希望它像我的文本输入字段一样上升。但我很困惑，因为我的下拉菜单没有任何真正的输入或标签。

我的下拉菜单最外层的 div 具有“ui-float-label”类。在里面我有一个带有“ui-fluid”类的 div。最后在“ui-fluid”里面有我的 p-autocomplete ，看起来像这样。

<p-autoComplete
                [(ngModel)]="valueOfSingleSelection"
                [suggestions]="selectionResults"
                (completeMethod)="search($event)"
                field="label"
                [placeholder]="selectorProperties.labelMls"
                [minLength]="1"
                [dropdown]="true"
                [disabled]="!selectorProperties.enabled"
                required
                (onBlur)="setRequiredOnBlur()">

那么如何让占位符上升呢？我知道菜鸟问题，但我感谢我能得到的每一个帮助，谢谢

Answer 1

您应该使用浮动标签，这里是文档： https ://www.primefaces.org/primeng/showcase/#/floatlabel

用法如下：

    <div class="p-field p-col-12 p-md-4">
        <span class="p-float-label">
            <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
            <label for="autocomplete">AutoComplete</label>
        </span>
    </div>

基本上，您将自动完成和标签扭曲在class="p-float-label"容器中