AutoComplete Overview

The Blazor AutoComplete component is a textbox that offers the users hints as they type. These suggestions can be filtered as the user types. The user can write their own value or click a suggestion from the dropdown to select it and populate the input. You can control the list of suggestions through data binding, various appearance settings like dimensions and templates.

Telerik UI for Blazor Ninja image

The AutoComplete component is part of Telerik UI for Blazor, a professional grade UI library with 85+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

To use a Telerik AutoComplete for Blazor

  1. add the TelerikAutoComplete tag
  2. populate its Data property with the collection of items you want in the dropdown
  3. (optional) enable features like filtering and clear button

AutoComplete two-way value binding, main features and simple data binding

@* Main features and simple data binding for the suggestions and the Value *@

User input: @TheValue
<br />
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@TheValue"
    Placeholder="Enter your role (can be free text)" ClearButton="true" />

    //Current value is null (no item is sellected) which allows the Placeholder to be displayed.
    string TheValue { get; set; }

    List<string> Suggestions { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"

The result from the code snippet above, as the user types a custom value

If you want to get a value identifier for the items in the dropdown instead of their text, consider the ComboBox component. The AutoComplete is a free text input that accepts any text the user writes, not just the suggestions from the dropdown. Thus, the Value of the AutoComplete is always a string, while the ComboBox can provide you with a number or a Guid, not only a string.

Component namespace and reference

The AutoComplete is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the Data Bind - Considerations article.


The AutoComplete provides the following features:

  • Class - the CSS class that will be rendered on the main wrapping element of the AutoComplete.

  • PopupClass - additional CSS class to customize the appearance of the AutoComplete's dropdown.

  • ClearButton - whether the user will have the option to clear the selected value with a button on the input. When it is clicked, the Value will be updated to string.Empty.

  • Data - allows you to provide the data source. Required.

  • Enabled - whether the component is enabled.

  • Filterable - whether filtering is enabled for the end user (suggestions will get narrowed down as they type).

  • FilterOperator - the string operation that will be used for filtering. Defaults to StartsWith.

  • Id - renders as the id attribute on the <input /> element, so you can attach a <label for=""> to the input.

  • MinLength - how many characters the text has to be before the suggestions list appears. Cannot be 0. Often works together with filtering.

  • Placeholder - the text the user sees as a hint when there is no text in the input. In order for it to be shown, the Value parameter should be set to the default value for string (null).

  • PopupHeight - the height of the expanded dropdown list element.

  • PopupWidth - the width of the expanded dropdown list element. If you don't specify a value, the dropdown width will match the main element which can help with responsive layouts and 100% widths.

  • TItem - the type of the model to which the component is bound. Required if you can't provide Data or Value. Determines the type of the reference object.

  • Value and bind-Value- get/set the value of the component, can be used for binding. Use the @bind-Value syntax for two-way binding, for example, to a variable of your own. The Value must be a string.

  • ValueField - the name of the field from the model that will be shown as hints to the user. Defaults to Value. Not required when binding to a simple list of strings.

  • Width - the width of the main element. By default this parameter is set to 300px. In case you would like it to fit to a container you could set it in 100% or other percent value depending on the application needs.

  • TabIndex - maps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key.

  • Templates - they allow you to control the rendering of items in the component. See the Templates article for more details.

  • Validation - see the Input Validation article for more details.

If you are looking for more fields from the view-model that describes the dropdown items, not just the Value, see the Get model from dropodwn KB article and the OnChange event.

You may also want to review/join the discussion and Vote for this request: Binding DropDownList Value to complex model

See Also

In this article
Not finding the help you need? Improve this article