# .NET MAUI AutoComplete Templates

## Overview

If the default templates of the control do not suit your needs, you can define a custom template. The available templates for customizing are:

* `NoResultsTemplate`(`DataTemplate`)—Defines the template visualized when there are no suggestions found.
* `ShowMoreTemplate`(`DataTemplate`) for Tokens Support—Defines the template used to create show more view when `DisplayMore="Tokens"`.
* `LoadingTemplate`(`DataTemplate`) for [Remote Search](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/remote-search) functionality—Defines the loading message in `RemoteSearch state`.
* `TokensTemplate`(`DataTemplate`) for [Tokens Support](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/tokens-support)—Defines the template used to visualize the tokens.
* `SuggestionItemTemplate`(`DataTemplate`)—Defines the template that will be used to create each of the suggestions.
* `SuggestionViewTemplate`(`DataTemplate`)—Defines the template used to visualize the filtered items.

## Example

### NoResults Template

Here is an example how the `NoResults` Template can be defined:

```XAML
<telerik:RadAutoComplete.NoResultsTemplate>
    <DataTemplate>
        <Label Text="No match was found for the specific search. Please try again."
                HorizontalOptions="Center"
                VerticalOptions="Center"/>
    </DataTemplate>
</telerik:RadAutoComplete.NoResultsTemplate>
```

### ShowMore Template

XAML definition of `ShoWMore` Template:

```XAML
<telerik:RadAutoComplete.ShowMoreTemplate>
    <DataTemplate>
        <Label Text="{Binding Path=., StringFormat='+{0} more'}" 
               VerticalTextAlignment="Center" />
    </DataTemplate>
</telerik:RadAutoComplete.ShowMoreTemplate>
```

### Loading Template

XAML definition of the Loading Template:

```XAML
<telerik:RadAutoComplete.LoadingTemplate>
    <DataTemplate>
        <HorizontalStackLayout HorizontalOptions="Center"
                                Margin="0, 20, 0, 20">
            <Label Text="Searching... " 
                    FontSize="16" 
                    TextColor="#8E8E93"/>
            <telerik:RadBusyIndicator x:Name="busyIndicator" 
                                        HeightRequest="24" 
                                        WidthRequest="24"
                                        IsBusy="True"
                                        VerticalOptions="Start"
                                        AnimationContentColor="#8660C5"
                                        AnimationType="Animation9"/>
        </HorizontalStackLayout>
    </DataTemplate>
</telerik:RadAutoComplete.LoadingTemplate>
```

## See Also

* [Remote Search](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/remote-search)
* [Filtering](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/filtering)
* [Styling](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/styling)