Fixed #7442 - VirtualScroller for Autocomplete items

primefaces · Apr 8, 2021 · 3ea542b · 3ea542b
1 parent b5707df
commit 3ea542b
Showing 1 changed file with 24 additions and 7 deletions.
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
@@ -8,6 +8,7 @@ import {SharedModule,PrimeTemplate} from 'primeng/api';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
 import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+import {ScrollingModule} from '@angular/cdk/scrolling';
 
 export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -38,7 +39,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
             </ul>
             <i *ngIf="loading" class="p-autocomplete-loader pi pi-spinner pi-spin"></i><button #ddBtn type="button" pButton [icon]="dropdownIcon" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple
                 (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex"></button>
-            <div #panel *ngIf="overlayVisible" [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"
+            <div #panel *ngIf="overlayVisible" [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"
                 [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
                 <ul role="listbox" [attr.id]="listId" class="p-autocomplete-items">
                     <ng-container *ngIf="group">
@@ -54,10 +55,22 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                             <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: suggestions}"></ng-container>
                     </ng-container>
                     <ng-template #itemslist let-suggestionsToDisplay>
-                        <li role="option" *ngFor="let option of suggestionsToDisplay; let idx = index" class="p-autocomplete-item" pRipple [ngClass]="{'p-highlight': (option === highlightOption)}" [id]="highlightOption == option ? 'p-highlighted-option':''" (click)="selectItem(option)">
-                            <span *ngIf="!itemTemplate">{{resolveFieldData(option)}}</span>
-                            <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: idx}"></ng-container>
-                        </li>
+                        <ng-container *ngIf="!virtualScroll; else virtualScrollList">
+                            <li role="option" *ngFor="let option of suggestionsToDisplay; let idx = index" class="p-autocomplete-item" pRipple [ngClass]="{'p-highlight': (option === highlightOption)}" [id]="highlightOption == option ? 'p-highlighted-option':''" (click)="selectItem(option)">
+                                <span *ngIf="!itemTemplate">{{resolveFieldData(option)}}</span>
+                                <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: idx}"></ng-container>
+                            </li>
+                        </ng-container>
+                        <ng-template #virtualScrollList>
+                            <cdk-virtual-scroll-viewport #viewport [ngStyle]="{'height': scrollHeight}" [itemSize]="itemSize" *ngIf="virtualScroll && !noResults">
+                                <ng-container *cdkVirtualFor="let option of suggestionsToDisplay; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd">
+                                    <li role="option" class="p-autocomplete-item" pRipple [ngClass]="{'p-highlight': (option === highlightOption)}" [ngStyle]="{'height': itemSize + 'px'}" [id]="highlightOption == option ? 'p-highlighted-option':''" (click)="selectItem(option)">
+                                        <span *ngIf="!itemTemplate">{{resolveFieldData(option)}}</span>
+                                        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: i}"></ng-container>
+                                    </li>
+                                </ng-container>
+                            </cdk-virtual-scroll-viewport>
+                        </ng-template>
                         <li *ngIf="noResults && emptyMessage" class="p-autocomplete-emptymessage p-autocomplete-item">{{emptyMessage}}</li>
                     </ng-template>
                 </ul>
@@ -110,6 +123,10 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 
     @Input() disabled: boolean;
 
+    @Input() virtualScroll: boolean;
+
+    @Input() itemSize: number;
+
     @Input() maxlength: number;
 
     @Input() name: string;
@@ -900,8 +917,8 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 }
 
 @NgModule({
-    imports: [CommonModule,InputTextModule,ButtonModule,SharedModule,RippleModule],
-    exports: [AutoComplete,SharedModule],
+    imports: [CommonModule,InputTextModule,ButtonModule,SharedModule,RippleModule,ScrollingModule],
+    exports: [AutoComplete,SharedModule,ScrollingModule],
     declarations: [AutoComplete]
 })
 export class AutoCompleteModule { }