Angular AutoComplete Data Binding

The Angular AutoComplete provides flexible data-binding to display suggestions as the user types. Set the data property to an array of primitive values (strings or numbers) or complex objects.

Choose the binding approach that best fits your data source and application requirements.

You can bind the AutoComplete to:

Binding to Local Data

Local data binding refers to providing the data directly in the component. The AutoComplete supports the following local data types:

• Arrays of primitive data (strings, numbers, or other)
• Arrays of complex data (objects)

Arrays of Primitive Data

To bind the AutoComplete to an array of strings or numbers, assign the array to the data property. No additional configuration is required because the component uses the primitive values directly as both display text and input values.

<kendo-autocomplete [data]="['Albania', 'Andorra', 'Armenia']"></kendo-autocomplete>

The following example demonstrates how to bind the AutoComplete to an array of primitive data.

Arrays of Complex Data

To bind the AutoComplete to an array of objects, set the valueField property. The valueField property specifies which object field of type string the component uses to populate the input value when the user selects an item.

<kendo-autocomplete
    [data]="countries"
    valueField="name">
</kendo-autocomplete>

public countries: Array<{ name: string; code: string }> = [
    { name: "Albania", code: "AL" },
    { name: "Andorra", code: "AD" },
    { name: "Armenia", code: "AM" },
];

The following example demonstrates how to bind the AutoComplete to an array of complex data.

Binding to Remote Data

For remote data scenarios, the AutoComplete supports the following approaches:

• Using a service—Fetch data through an Angular service and assign the results to the data property.
• Using the async pipe—Bind an Observable directly to the data property by using the Angular async pipe.
• Streaming data—Bind to an Observable that emits values over time.

Services

You can fetch data from a remote endpoint through an Angular service and assign the result to the data property. This approach gives you full control over request parameters and response handling.

The following example demonstrates how to bind the AutoComplete to remote data by using a service.

Async Pipe

To bind the AutoComplete directly to an Observable, use the Angular async pipe. The async pipe subscribes to the Observable and updates the data property automatically when new data arrives.

<kendo-autocomplete [data]="countries$ | async"></kendo-autocomplete>

public countries$: Observable<any> = this.service.getCountries();

The following example demonstrates how to bind the AutoComplete to an asynchronous source.

Streaming of Data

The AutoComplete also supports binding to Observables that emit values over time. Use the async pipe to subscribe to the Observable and update the suggestion list as new values arrive.

<kendo-autocomplete [data]="listItems | async"></kendo-autocomplete>

public listItems: Observable<string[]> = interval(1000).pipe(
    map((x) => "New item " + x),
    bufferCount(5)
);

The following example starts with an empty Observable, produces one random value each second, and emits values in batches of five.

Suggested Links

• Filtering
• API Reference of the AutoComplete