Blazor AutoComplete Example - UI Virtualization

This example demonstrates the AutoComplete component's virtualization support for optimized performance with large datasets. Virtualization reduces initial load and memory usage by rendering only the items visible within the popup and loading remaining items on demand as the user scrolls.

Virtualization features:

• The sample binds 150 items to the component to emulate a large dataset.
• Only the items that fit the popup height are rendered initially; additional items render as the user scrolls.
• Remaining items load dynamically on scroll, improving responsiveness and reducing DOM size.
• Enable this behavior by setting the EnableVirtualization property to true.
• Virtualization improves UI performance for large data and lowers initial rendering cost.
• It is compatible with both local collections and remote data sources.

Use virtualization when presenting long lists to preserve smooth scrolling and fast interaction. Adjust popup height and pageSize to balance perceived latency and network requests: smaller pageSize reduces initial payload but may increase backend calls, while larger pageSize reduces requests but increases client-side rendering. When using remote data, ensure your service supports paging and returns consistent record counts so virtualization can compute offsets accurately. Test with representative datasets and devices to tune popup dimensions and virtualization parameters for optimal responsiveness.

Verify that virtualization does not interfere with selection persistence; selected items should remain tracked even when scrolled out of view. Monitor memory and repaint metrics during integration, and prefer virtualization for mobile scenarios where DOM size impacts battery and CPU. Keep item templates minimal when virtualization is enabled to reduce render cost. Refer to the linked API documentation for examples and platform notes; anchors include aria-label attributes and open in a new tab. Test integration across target browsers and devices.