AutoComplete doc updated

primefaces · Apr 8, 2021 · 8136fa8 · 8136fa8
1 parent 3ea542b
commit 8136fa8
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 2 deletions.
diff --git a/src/app/showcase/components/autocomplete/autocompletedemo.html b/src/app/showcase/components/autocomplete/autocompletedemo.html
@@ -31,6 +31,10 @@ <h5>Grouped</h5>
             </ng-template>
         </p-autoComplete>
 
+        <h5>Virtual Scroll (10000 Items)</h5>
+        <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [itemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true">
+        </p-autoComplete>
+
         <h5>Multiple</h5>
         <span class="p-fluid">
             <p-autoComplete [(ngModel)]="selectedCountries" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [multiple]="true">
@@ -478,6 +482,18 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Used to define a string that autocomplete attribute the current element.</td>
                         </tr>
+                        <tr>
+                            <td>virtualScroll</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether the data should be loaded on demand during scroll.</td>
+                        </tr>
+                        <tr>
+                            <td>itemSize</td>
+                            <td>number</td>
+                            <td>null</td>
+                            <td>Height of an item in the list for VirtualScrolling.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -640,6 +656,10 @@ <h5>Dependencies</h5>
     &lt;/ng-template&gt;
 &lt;/p-autoComplete&gt;
 
+&lt;h5&gt;Virtual Scroll (10000 Items)&lt;/h5&gt;
+&lt;p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [itemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"&gt;
+&lt;/p-autoComplete&gt;
+
 &lt;h5&gt;Multiple&lt;/h5&gt;
 &lt;span class="p-fluid"&gt;
     &lt;p-autoComplete [(ngModel)]="selectedCountries" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [multiple]="true"&gt;
@@ -651,17 +671,23 @@ <h5>Dependencies</h5>
 export class AutoCompleteDemo &#123;
 
     selectedCountry: any;
+
+    selectedItem: any;
 
     countries: any[];
+
+    items: any[];
 
     filteredCountries: any[];
 
+    filteredItems: any[];
+
     selectedCountries: any[];
 
     selectedCountryAdvanced: any[];
 
     filteredBrands: any[];
-    
+
     groupedCities: SelectItemGroup[];
 
     filteredGroups: any[];
@@ -702,12 +728,18 @@ <h5>Dependencies</h5>
                 ]
             &#125;
         ];
+
+        this.items = [];
+        for (let i = 0; i &lt; 10000; i++) &#123;
+            this.items.push(&#123;label: 'Item ' + i, value: 'Item ' + i&#125;);
+        &#125;
     &#125;
 
     filterCountry(event) &#123;
         //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
         let filtered : any[] = [];
         let query = event.query;
+
         for(let i = 0; i &lt; this.countries.length; i++) &#123;
             let country = this.countries[i];
             if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) &#123;
@@ -718,6 +750,21 @@ <h5>Dependencies</h5>
         this.filteredCountries = filtered;
     &#125;
 
+    filterItems(event) &#123;
+        //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+        let filtered : any[] = [];
+        let query = event.query;
+
+        for(let i = 0; i &lt; this.items.length; i++) &#123;
+            let item = this.items[i];
+            if (item.label.toLowerCase().indexOf(query.toLowerCase()) == 0) &#123;
+                filtered.push(item);
+            &#125;
+        &#125;
+
+        this.filteredItems = filtered;
+    &#125;
+
     filterGroupedCity(event) &#123;
         let query = event.query;
         let filteredGroups = [];

diff --git a/src/app/showcase/components/autocomplete/autocompletedemo.ts b/src/app/showcase/components/autocomplete/autocompletedemo.ts
@@ -7,17 +7,23 @@ import { CountryService } from '../../service/countryservice';
 export class AutoCompleteDemo {
 
     selectedCountry: any;
+
+    selectedItem: any;
 
     countries: any[];
+
+    items: any[];
 
     filteredCountries: any[];
 
+    filteredItems: any[];
+
     selectedCountries: any[];
 
     selectedCountryAdvanced: any[];
 
     filteredBrands: any[];
-    
+
     groupedCities: SelectItemGroup[];
 
     filteredGroups: any[];
@@ -58,12 +64,18 @@ export class AutoCompleteDemo {
                 ]
             }
         ];
+
+        this.items = [];
+        for (let i = 0; i < 10000; i++) {
+            this.items.push({label: 'Item ' + i, value: 'Item ' + i});
+        }
     }
 
     filterCountry(event) {
         //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
         let filtered : any[] = [];
         let query = event.query;
+
         for(let i = 0; i < this.countries.length; i++) {
             let country = this.countries[i];
             if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
@@ -74,6 +86,21 @@ export class AutoCompleteDemo {
         this.filteredCountries = filtered;
     }
 
+    filterItems(event) {
+        //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+        let filtered : any[] = [];
+        let query = event.query;
+
+        for(let i = 0; i < this.items.length; i++) {
+            let item = this.items[i];
+            if (item.label.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+                filtered.push(item);
+            }
+        }
+
+        this.filteredItems = filtered;
+    }
+
     filterGroupedCity(event) {
         let query = event.query;
         let filteredGroups = [];