# AutoComplete Events

This article explains the events available in the Telerik AutoComplete for Blazor:

* [ValueChanged](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/events#valuechanged)
* [OnChange](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/events#onchange)
* [OnRead](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/events#onread)
* [OnOpen](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/events#onopen)
* [OnClose](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/events#onclose)
* [OnItemRender](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/events#onitemrender)
* [OnBlur](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/events#onblur)

## ValueChanged

The `ValueChanged` event fires on every user keystroke that changes the textbox value.

> caption Handle AutoComplete ValueChanged

<demo metaUrl="client/autocomplete/events/value-changed/" height="250"></demo>

> tip The event is an `EventCallback`. It can be synchronous and return `void`, or asynchronous and return `async Task`. Do not use `async void`.

> note The lambda expression in the handler is required by the framework: <https://github.com/aspnet/AspNetCore/issues/12226>.

> caption Handle ValueChanged and provide initial value

<demo metaUrl="client/autocomplete/events/value-changed-initial/" height="280"></demo>

## OnChange

The `OnChange` event represents a user action - confirmation of the current value/item. The key differences with `ValueChanged` are:

* `OnChange` does not prevent two-way binding (the `@bind-Value` syntax)
* `OnChange` fires when the user presses `Enter` in the input, or blurs the input (for example, clicks outside of the input or dropdown). It does not fire on every keystroke, but it fires when an item is selected from the dropdown.

> caption Handle OnChange

<demo metaUrl="client/autocomplete/events/on-change/" height="280"></demo>

## OnRead

You can use the [`OnRead` event](https://www.telerik.com/blazor-ui/documentation/common-features/data-binding/onread) to provide data to the component based on custom logic and the current user input and/or scroll position (when using [virtualization](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/virtualization)). The event fires when:

* The component initializes.
* The user [filters](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/filter).
* The user scrolls with [virtualization](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/virtualization) enabled.

You can also call remote data through async operations.

Find out how to [get the applied filtering and grouping criteria](https://www.telerik.com/blazor-ui/documentation/common-features/data-binding/descriptors).

When using `OnRead`, make sure to set `TItem` and `TValue`.

> caption Custom Data according to the user input in the AutoComplete

<demo metaUrl="client/autocomplete/events/on-read-custom/" height="300"></demo>

> caption Filter large local data through the Telerik DataSource extensions

<demo metaUrl="client/autocomplete/events/on-read-local/" height="350"></demo>

## OnOpen

The `OnOpen` event fires before the AutoComplete popup renders.

The event handler receives as an argument an `AutoCompleteOpenEventArgs` object that contains:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property      | Description                                                                  |
| ------------- | ---------------------------------------------------------------------------- |
| `IsCancelled` | Set the `IsCancelled` property to `true` to cancel the opening of the popup. |

<demo metaUrl="client/autocomplete/events/on-open/" height="250"></demo>

## OnClose

The `OnClose` event fires before the AutoComplete popup closes.

The event handler receives as an argument an `AutoCompleteCloseEventArgs` object that contains:

| Property      | Description                                                                  |
| ------------- | ---------------------------------------------------------------------------- |
| `IsCancelled` | Set the `IsCancelled` property to `true` to cancel the closing of the popup. |

<demo metaUrl="client/autocomplete/events/on-close/" height="250"></demo>

## OnItemRender

The `OnItemRender` event fires when each item in the AutoComplete dropdown renders.

The event handler receives as an argument an `AutoCompleteItemRenderEventArgs<TItem>` object that contains:

| Property | Description                                          |
| -------- | ---------------------------------------------------- |
| `Item`   | The current item that renders in the AutoComplete.   |
| `Class`  | The custom CSS class that will be added to the item. |

<demo metaUrl="client/autocomplete/events/on-item-render/" height="300"></demo>

## OnBlur

The `OnBlur` event fires when the component loses focus.

> caption Handle the OnBlur event

<demo metaUrl="client/autocomplete/events/on-blur/" height="250"></demo>

## See Also

* [ValueChanged and Validation](https://www.telerik.com/blazor-ui/documentation/knowledge-base/value-changed-validation-model)
* [Fire OnChange Only Once](https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-onchange-fires-twice)
* [Filter AutoComplete Items](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/filter)
* [Refresh AutoComplete Data](https://www.telerik.com/blazor-ui/documentation/components/autocomplete/refresh-data)