Blazor AutoComplete Example - Grouping and Icons

This example demonstrates grouping and icon support in the AutoComplete component to present related items under category headers and to enrich suggestion rows with visual cues. Grouping improves scanability for medium and long lists, while icons help users identify item types quickly.

Grouping

• Group items by a model field using the GroupBy property. The sample groups vegetables by the Category property to render category headers and preserve item ordering within each group.

Icon support

• Render icons in suggestion rows via the IconCss property. The sample maps an icon-class field per item so suggestions display a compact icon alongside the label for faster visual recognition.

Implementation notes:

• Bind Items/DataSource to a collection that includes both the grouping key and an optional icon-class field. Configure AutoCompleteFieldSettings.GroupBy and AutoCompleteFieldSettings.IconCss to reference those fields.
• Use item templates to control layout (icon + label) while preserving keyboard navigation and selection behavior; ensure group headers remain semantic for assistive technologies.
• Test grouping and icons with local and remote data to confirm filtering, pagination, and selection operate consistently across data scenarios.

Consult the linked documentation for examples, templates, and platform notes. All anchors include aria-label attributes and open in a new tab for quick reference.