Update AutoComplete demo and doc

api-generator/components/autocomplete.js

@@ -112,6 +112,12 @@ const AutoCompleteProps = [
         type: "string",
         default: "null",
         description: "Style class of the overlay panel."
+    },
+    {
+        name: "virtualScrollerOptions",
+        type: "object",
+        default: "null",
+        description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
     }
 ];
 

src/views/autocomplete/AutoCompleteDemo.vue

@@ -33,6 +33,9 @@
                     </template>
                 </AutoComplete>
 
+                <h5>Virtual Scroll (100000 Items)</h5>
+                <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
+
                 <h5>Multiple</h5>
                 <span class="p-fluid">
                     <AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@@ -59,6 +62,8 @@ export default {
             filteredCities: null,
             filteredCountries: null,
             selectedCountries: [],
+            selectedItem: null,
+            filteredItems: null,
             groupedCities: [{
                 label: 'Germany', code: 'DE',
                 items: [
@@ -85,7 +90,8 @@ export default {
                     {label: 'Tokyo', value: 'Tokyo'},
                     {label: 'Yokohama', value: 'Yokohama'}
                 ]
-            }]
+            }],
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
         }
     },
     countryService: null,
@@ -120,6 +126,20 @@ export default {
             }
 
             this.filteredCities = filteredCities;
+        },
+        searchItems(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 query = event.query;
+            let filteredItems = [];
+
+            for(let i = 0; i < this.items.length; i++) {
+                let item = this.items[i];
+                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                    filteredItems.push(item);
+                }
+            }
+
+            this.filteredItems = filteredItems;
         }
     },
     components: {

src/views/autocomplete/AutoCompleteDoc.vue

@@ -254,6 +254,12 @@ export default {
                         <td>string</td>
                         <td>null</td>
                         <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>virtualScrollerOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -428,6 +434,9 @@ export default {
                 </template>
             </AutoComplete>
 
+            <h5>Virtual Scroll (100000 Items)</h5>
+            <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
+
             <h5>Multiple</h5>
             <span class="p-fluid">
                 <AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@@ -450,6 +459,8 @@ export default {
             filteredCities: null,
             filteredCountries: null,
             selectedCountries: [],
+            selectedItem: null,
+            filteredItems: null,
             groupedCities: [{
                 label: 'Germany', code: 'DE',
                 items: [
@@ -476,7 +487,8 @@ export default {
                     {label: 'Tokyo', value: 'Tokyo'},
                     {label: 'Yokohama', value: 'Yokohama'}
                 ]
-            }]
+            }],
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
         }
     },
     countryService: null,
@@ -511,6 +523,20 @@ export default {
             }
 
             this.filteredCities = filteredCities;
+        },
+        searchItems(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 query = event.query;
+            let filteredItems = [];
+
+            for(let i = 0; i < this.items.length; i++) {
+                let item = this.items[i];
+                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                    filteredItems.push(item);
+                }
+            }
+
+            this.filteredItems = filteredItems;
         }
     }
 }
@@ -545,6 +571,9 @@ export default {
                 </template>
             </AutoComplete>
 
+            <h5>Virtual Scroll (100000 Items)</h5>
+            <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
+
             <h5>Multiple</h5>
             <span class="p-fluid">
                 <AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@@ -572,6 +601,8 @@ export default {
         const filteredCities = ref();
         const filteredCountries = ref();
         const selectedCountries = ref([]);
+        const selectedItem = ref();
+        const filteredItems = ref();
         const groupedCities = ref ([{
             label: 'Germany', code: 'DE',
             items: [
@@ -599,6 +630,8 @@ export default {
                 {label: 'Yokohama', value: 'Yokohama'}
             ]
         }]);
+        const items = Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
         const searchCountry = (event) => {
             setTimeout(() => {
                 if (!event.query.trim().length) {
@@ -624,7 +657,22 @@ export default {
 
             filteredCities.value = newFilteredCities;
         }
-        return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity }
+        const searchItems = (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 query = event.query;
+            let _filteredItems = [];
+
+            for(let i = 0; i < this.items.length; i++) {
+                let item = this.items[i];
+                if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                    _filteredItems.push(item);
+                }
+            }
+
+            filteredItems = _filteredItems;
+        }
+
+        return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity, searchItems, selectedItem, filteredItems, items }
     }
 }
 <\\/script>`