AutoComplete Templates

The AutoComplete component allows you to change what is rendered in its items, header and footer through templates.

List of the available templates:

Item Template

The Item template determines how the individual items are rendered in the dropdown element of the component. By default, the text from the particular suggestions is rendered.

Item Template Example

@* Define what renders for the items in the dropdown *@

<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" Placeholder="Write your position">
    <ItemTemplate>
        Are you a&nbsp;<strong>@context</strong>
    </ItemTemplate>
</TelerikAutoComplete>

@code{
    string Role { 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

The header is content that you can place above the list of items inside the dropdown element. It is always visible when the combobox is expanded. By default it is empty.

Header Example

@* Define a header in the dropdown *@

<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" Placeholder="Write your position">
    <HeaderTemplate>
        <strong>Write your own if you don't see it in the list</strong>
    </HeaderTemplate>
</TelerikAutoComplete>

@code{
    string Role { 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

The footer is content that you can place below the list of items inside the dropdownlist element. It is always visible when the dropdown is expanded. By default it is empty.

Footer Example

@* Define dropdown footer *@

<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" Placeholder="Write your position">
    <FooterTemplate>
        <h5>Total Positions: @Suggestions.Count()</h5>
    </FooterTemplate>
</TelerikAutoComplete>

@code{
    string Role { 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

See Also

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