Grouping

The AutoComplete enables you to display grouped data.

Getting started

The AutoComplete supports GroupResult collections and does not require any additional set-up.

The following example demonstrates how to bind the AutoComplete to a collection of grouped items.

import { DataResult, groupBy } from '@progress/kendo-data-query';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-autocomplete
            [data]="groupedData"
            [valueField]="'name'">
        </kendo-autocomplete>
    </div>
  `
})
class AppComponent {
    public data: Array<any> = [
        { name: "Pork", category: "Food", subcategory: "Meat" },
        { name: "Pepper", category: "Food", subcategory: "Vegetables" },
        { name: "Beef", category: "Food", subcategory: "Meat" }
    ];
    public groupedData: DataResult = groupBy(this.data, [{field: "subcategory"}]);
}

In this article