- Binding local data
- Binding Remote data
- Customizing items count in virtualization
- Grouping with Virtualization
Contact Support
Virtualization in AutoComplete Component
31 Jan 202515 minutes to read
AutoComplete virtualization is a technique used to efficiently render extensive lists of items while minimizing the impact on performance. This method is particularly advantageous when dealing with large datasets because it ensures that only a fixed number of DOM (Document Object Model) elements are created. When scrolling through the list, existing DOM elements are reused to display relevant data instead of generating new elements for each item. This recycling process is managed internally.
During virtual scrolling, the data retrieved from the data source depends on the popup height and the calculation of the list item height. Enabling the enableVirtualization option in a AutoComplete activates this virtualization technique.
When fetching data from the data source, the actionBegin event is triggered before data retrieval begins. Then, the actionComplete event is triggered once the data is successfully fetched.
When the enableVirtualization property is enabled, the skip
and take
properties provided by the user within the Query class at the initial state or during the actionBegin
or actionComplete
events will not be considered, since it is internally managed and calculated based on certain dimensions with respect to the popup height.
Binding local data
The AutoComplete can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the fields property. When using virtual scrolling, the list updates based on the scroll offset value, triggering a request to fetch more data from the server. As the data is being fetched, the actionBegin
event occurs before the data retrieval starts. Once the data retrieval is successful, the actionComplete
event is triggered, indicating that the data fetch process is complete.
In the following example, text
column from complex data have been mapped to the value
field.
import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
AutoComplete.Inject(VirtualScroll);
let records: { [key: string]: Object }[] = [];
for (let i: number = 1; i <= 150; i++) {
let item = {
id: 'id' + i,
text: "Item " + i,
};
records.push(item);
}
//initiates the component
let atcObject: AutoComplete = new AutoComplete({
//bind the dataSorce property
dataSource: records,
//map the appropriate columns to fields property
fields: { value: 'text' },
//set the placeholder to DropDownList input
placeholder:"Select an Item ",
//set enableVirtualization property to true
enableVirtualization: true,
//set the height of the popup element
popupHeight: '200px'
});
//render the component
atcObject.appendTo('#atcelement');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 AutoComplete</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<input type="text" id='atcelement' />
</div>
</body>
</html>
Binding Remote data
The AutoComplete supports the retrieval of data from remote data services with the help of the DataManager
component, triggering the actionBegin
and actionComplete
events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the actionBegin
and actionComplete
events at that time as well.
The following sample displays the OrderId from the Orders
Data Service.
import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
AutoComplete.Inject(VirtualScroll);
//initiates the component
let atcObject: AutoComplete = new AutoComplete({
//bind the dataSorce property
dataSource: new DataManager({
url: 'https://services.syncfusion.com/js/production/api/Orders',
adaptor: new WebApiAdaptor ,
crossDomain: true
}),
//map the appropriate columns to fields property
fields: { value: 'OrderID' },
//set the placeholder to DropDownList input
placeholder:"Select an ID ",
//set enableVirtualization property to true
enableVirtualization: true,
//set the height of the popup element
popupHeight: '200px'
});
//render the component
atcObject.appendTo('#atcelement');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 AutoComplete</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<input type="text" id='atcelement' />
</div>
</body>
</html>
Customizing items count in virtualization
When the enableVirtualization
property is enabled, the take
property provided by the user within the Query parameter at the initial state or during the actionBegin
event will be considered. Internally, it calculates the items that fit onto the current page (i.e., probably twice the amount of the popup’s height). If the user-provided take value is less than the minimum number of items that fit into the popup, the user-provided take value will not be considered.
The following sample shows the example for Customizing items count in virtualization.
import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
import { Query } from '@syncfusion/ej2-data';
AutoComplete.Inject(VirtualScroll);
let records: { [key: string]: Object }[] = [];
for (let i: number = 1; i <= 150; i++) {
let item = {
id: 'id' + i,
text: "Item " + i,
};
records.push(item);
}
//initiates the component
let autoCompleteObject: AutoComplete = new AutoComplete({
//bind the dataSorce property
dataSource: records,
//map the appropriate columns to fields property
fields: { value: 'text' },
query: new Query().take(40),
actionBegin: (args) => {
args.query = new Query().take(45);
},
//set the placeholder to AutoComplete input
placeholder:"Select an Item ",
//set enableVirtualization property to true
enableVirtualization: true,
//set the height of the popup element
popupHeight: '200px'
});
//render the component
autoCompleteObject.appendTo('#atcelement');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<input type="text" id='atcelement' />
</div>
</body>
</html>
Grouping with Virtualization
The AutoComplete component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the groupBy field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness.
The following sample shows the example for Grouping with Virtualization.
import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
AutoComplete.Inject(VirtualScroll);
let records: { [key: string]: Object }[] = [];
for (let i = 1; i <= 150; i++) {
let item: { [key: string]: Object } = {};
item.id = 'id' + i;
item.text = `Item ${i}`;
// Generate a random number between 1 and 4 to determine the group
const randomGroup = Math.floor(Math.random() * 4) + 1;
switch (randomGroup) {
case 1:
item.group = 'Group A';
break;
case 2:
item.group = 'Group B';
break;
case 3:
item.group = 'Group C';
break;
case 4:
item.group = 'Group D';
break;
default:
break;
}
records.push(item);
}
//initiates the component
let atcObject: AutoComplete = new AutoComplete({
//bind the dataSorce property
dataSource: records,
//map the appropriate columns to fields property
fields: { groupBy: 'group', value: 'text' },
//set the placeholder to DropDownList input
placeholder:"Select an Item ",
//set enableVirtualization property to true
enableVirtualization: true,
//set the height of the popup element
popupHeight: '200px'
});
//render the component
atcObject.appendTo('#atcelement');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 AutoComplete</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<input type="text" id='atcelement' />
</div>
</body>
</html>