AutoComplete Data Binding

This article explains the different ways to provide data to an AutoComplete component, the properties related to data binding and their results. The key requirements is to have a string field for the suggestions.

For details on Value Binding and Data Binding, and the differences between them, see the Value Binding vs Data Binding article.

There are two key ways to bind data:

• Strings and Value Types
• Model

There are also some considerations to keep in mind.

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 dropdown 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

Strings and Value Types

You can data bind the AutoComplete to a simple collection of string data. When you have a concrete list of options for the user to choose from, their string representation is often suitable for display and you do not need special models.

To bind the AutoComplete, you need to:

1. provide an IEnumerable<string> to its Data property,
2. point the Value parameter to a string field.

Data binding an AutoComplete to a simple data source

@*Bind to an IEnumerable<string>*@

User input 1: @FirstValue
<br />
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@FirstValue" />

<br />
User input 2: @SecondValue
<br />
<TelerikAutoComplete Data="@ArraySuggestions" @bind-Value="@SecondValue" />

@code{
    private string FirstValue { get; set; }
    private List<string> Suggestions { get; set; } = new List<string> { "first", "second", "third" };

    private string SecondValue { get; set; }
    private string[] ArraySuggestions = new string[] { "one", "two", "three" };
}

Bind to a Model

You can bind the AutoComplete to a model in your application. This is useful when you have the data in some form already and you don't need to prepare a separate collection of suggestions.

To bind the AutoComplete to a model:

1. populate its Data property with the collection of items you want in the dropdown
2. set the ValueField to point to the corresponding name of the model that contains the string data for the suggestions
3. point the Value parameter to a string field in the view-model.

Data binding an AutoComplete to a model

@AutoComplete
<br />
<TelerikAutoComplete Data="@Suggestions"
                     @bind-Value="@AutoComplete"
                     ValueField="@( nameof(SuggestionsModel.Suggestion) )" />

@code{
    private string AutoComplete { get; set; }

    private List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
    {
        new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
        new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
        new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
    };

    public class SuggestionsModel
    {
        public string Suggestion { get; set; }//the auto complete needs only the string field
        public int SomeOtherField { get; set; }
    }
}

Considerations

Reference

The AutoComplete is a generic component and its type depends on the type of its Data and Value.

@*Reference when binding to a string collection*@

<TelerikAutoComplete @ref="@AutoCompleteRef"
                     Data="@Suggestions"
                     @bind-Value="@AutoCompleteValue" />

@code{
    private TelerikAutoComplete<string> AutoCompleteRef { get; set; }

    private string AutoCompleteValue { get; set; }

    private List<string> Suggestions { get; set; } = new List<string> { "first", "second", "third" };
}

@*Reference when binding to a model collection*@

<TelerikAutoComplete @ref="@AutoCompleteRef"
                     Data="@Suggestions" 
                     @bind-Value="@AutoCompleteValue"
                     ValueField="@( nameof(SuggestionsModel.Suggestion) )" />

@code{
    private TelerikAutoComplete<SuggestionsModel> AutoCompleteRef { get; set; }

    private string AutoCompleteValue { get; set; }

    private List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
    {
        new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
        new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
        new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
    };

    public class SuggestionsModel
    {
        public string Suggestion { get; set; }//the auto complete needs only the string field
        public int SomeOtherField { get; set; }
    }
}

Missing Data

The AutoComplete is, essentially, a textbox. This means that its Value is always a string and it is up to you to bind and/or use it. The Data parameter, however, is required for the functionality of the component, and it must never be null. If there are no suggestions that you wish to provide to the user, consider using a regular TextBox, or creating an empty collection.

Minimal AutoComplete configuration for it to run

@* If you cannot provide suggestions list, use an empty collection and the component will show "No Data" to the user in the suggestions list *@

<TelerikAutoComplete Data="@Suggestions" />

@code{
    List<string> Suggestions { get; set; } = new List<string>();
}

See Also

• AutoComplete Overview
• Live Demo: AutoComplete