# Suggestion Items Customization

Whenever the default template does not fit a particular scenario you can use the `SuggestionItemTemplate`.

* `SuggestionItemTemplate`(`DataTemplate`)—Defines the template that will be used to create each of the suggestions.

## Example

Here is an example how to use the RadAutoComplete `SuggestionItemTemplate`:

**1.** Create the needed business objects, for example type City with the following properties:

```C#
public class Client
{
    public Client() { }

    public Client(string name, string imageSource)
    {
        this.Name = name;
        this.ImageSource = imageSource;
    }

    public Client(string name, string email, string imageSource)
    {
        this.Name = name;
        this.Email = email;
        this.ImageSource = imageSource;
    }

    public string Name { get; set; }
    public string Email { get; set; }
    public string ImageSource { get; set; }
}
```

**2.** Create a ViewModel with a collection of City objects:

```C#
public class ClientsViewModel
{
    public ClientsViewModel()
    {
        this.Source = new ObservableCollection<Client>()
        {
            new Client("Freda Curtis", "fcurtis@mail.com", "available.png"),
            new Client("Jeffery Francis", "jfrancis@mail.com", "away.png"),
            new Client("Eva Lawson", "elawson@mail.com", "available.png"),
            new Client("Emmett Santos", "esantos@mail.com", "busy.png"),
            new Client("Theresa Bryan", "tbryan@mail.com", "available.png"),
            new Client("Jenny Fuller", "jfuller@mail.com", "busy.png"),
            new Client("Terrell Norris", "tnorris@mail.com", "away.png"),
            new Client("Eric Wheeler", "ewheeler@mail.com", "away.png"),
            new Client("Nida Carty", "ncarty@mail.com", "away.png"),
            new Client("Niki Samaniego", "nsamaniego@mail.com", "busy.png")
        };
    }

    public ObservableCollection<Client> Source { get; set; }
}
```

**3.** The following snippet shows the `SuggestionItemTemplate`:

```XAML
<telerik:RadAutoComplete x:Name="autoComplete"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         VerticalOptions="Start"
                         Placeholder="Search here...">
    <telerik:RadAutoComplete.BindingContext>
        <local:ClientsViewModel/>
    </telerik:RadAutoComplete.BindingContext>
    <telerik:RadAutoComplete.SuggestionItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="Auto,Auto">
                <Grid.Resources>
                    <Style x:Key="LabelStyle" TargetType="Label">
                        <Setter Property="VerticalOptions" Value="Center" />
                        <Setter Property="TextColor" Value="#000000" />
                    </Style>
                    <Style x:Key="LabelStyle_MacCatalyst" TargetType="Label" BasedOn="{StaticResource LabelStyle}">
                        <Style.Triggers>
                            <DataTrigger TargetType="Label"
                                         Binding="{Binding IsMouseOver, Source={RelativeSource AncestorType={x:Type ContentView}}}"
                                         Value="True">
                                <Setter Property="TextColor" Value="#FFFFFF" />
                            </DataTrigger>
                            <DataTrigger TargetType="Label"
                                         Binding="{Binding IsCurrent, Source={RelativeSource AncestorType={x:Type ContentView}}}"
                                         Value="True">
                                <Setter Property="TextColor" Value="#FFFFFF" />
                            </DataTrigger>
                            <MultiTrigger TargetType="Label">
                                <MultiTrigger.Conditions>
                                    <BindingCondition Binding="{Binding IsCurrent, Source={RelativeSource AncestorType={x:Type ContentView}}}"
                                                      Value="True" />
                                    <BindingCondition Binding="{Binding IsMouseOver, Source={RelativeSource AncestorType={x:Type ContentView}}}"
                                                      Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="TextColor" Value="#FFFFFF" />
                            </MultiTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Resources>
                <telerik:RadBorder BackgroundColor="#B8B8B8"
                                   HeightRequest="{OnPlatform Default=20, WinUI=16}"
                                   WidthRequest="{OnPlatform Default=20, WinUI=16}"
                                   Margin="5"
                                   CornerRadius="5" />
                <Label Margin="5"
                       Grid.Column="1"
                       FontSize="18"
                       Text="{Binding Name}"
                       Style="{OnPlatform Default={StaticResource LabelStyle}, MacCatalyst={StaticResource LabelStyle_MacCatalyst}}" />
            </Grid>
        </DataTemplate>
    </telerik:RadAutoComplete.SuggestionItemTemplate>
</telerik:RadAutoComplete>
```

Here is the result:

![Telerik UI for .NET MAUI AutoComplete custom SuggestionItemTemplate showing purple icons beside client names](https://www.telerik.com/maui-ui/documentation/assets/6496050e68ba2998e2afe5f960095fe4/autocomplete-suggestionitem-template.png "AutoComplete SuggestionItemTemplate Example")

> important For AutoComplete SuggestionItemTemplate example refer to the [SDKBrowser Demo application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app).

## 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)
* [Templates](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/templates/overview)
* [Styling](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/styling)