@rdkmaster/jigsaw-labs/component/input/auto-complete-input.html

Jigsaw, the next generation component set for RDK

<j-input #input [placeholder]="placeholder" [(value)]="value" [width]="width ? '100%' : null" [height]="height ? '100%' : null"
         [blurOnClear]="blurOnClear" [clearable]="clearable" [disabled]="disabled" [valid]="valid"
         (focus)="_$handleFocus($event)" (blur)="_$handleBlur($event)">
    <ng-content jigsaw-prefix-icon select="[jigsaw-prefix-icon], [j-prefix-icon]"></ng-content>
    <ng-content jigsaw-icon select="[jigsaw-icon], [j-icon]"></ng-content>
</j-input>

<ng-template #dropdownTemp>
    <div class="jigsaw-auto-complete-input-list-box" [style.max-height]="_$maxDropDownHeight"
         [perfectScrollbar]="{suppressScrollX: true, wheelSpeed: 0.5, wheelPropagation: true, minScrollbarLength: 20}">
        <div *ngFor="let category of _$data;">
            <label *ngIf="category.category" class="jigsaw-auto-complete-input-item-title">{{category.category}}</label>
            <ul>
                <li class="jigsaw-auto-complete-input-item" (click)="_$add($event,item)" *ngFor="let item of category.items;">
                    <label>{{item}}</label>
                </li>
            </ul>
        </div>
    </div>
</ng-template>