Read documentation here

RadAutoCompleteBox control provides suggestion to user. It provides suggestion on basis of set criteria filtering data from a SuggestionSource. SuggestionSource is nothing but a Data Source.

RadAutoCompleteBox control gives you immersive experience as following. It can be bind to data source as simple as collection of strings or collection of complex objects. In below RadAutoCompleteBox SuggestionSource is of complex objects.

To start working with RadAutoCompleteBox first you need to add following namespace on the XAML page.

You can create a simple RadAutoCompleteBox as following

There are many properties exposed to configure RadAutoCompleteBox. You can set values of those properties as per your requirement. Two important properties are AutoCompleteMode and AutoCompletePopupDisplayMode. AutoCompleteMode property defines the way filtering should be done. Filtering criteria will be can be set to two values.

AutoCompletePopupDisplayMode defines the place of popup windows to open. This property can be set to four values. Those four values are as following

SuggestionSource can be created as following. It is a function returning List of Strings.

After creating SuggestionSource you can set that in code behind as given below.

At this point on running the application, you should get experience of RadAutoCompleteBox as given in below image,

Now let us see how we can work with a complex object. For that go ahead and create a class called CountryData. There are three properties in the class.

public class CountryData
{

public string CountryName { get; set; }
public string  CountryCapital { get; set; }
public ImageSource CountryFlag { get; set; }

}

Next you need to create data source or suggestion source. For that I have created a function returning List of CountryData. I have put images in the Images folder. In below function using collection initializer we are creating List of object of CountryData and returning that.

private List<CountryData> GetCountryDetails()
{
List<CountryData> lstCountryData = new List<CountryData>
{
new CountryData
{
CountryName = "India" , CountryCapital ="New Delhi " , CountryFlag= GetImageSource("/Images/indiaflag.jpg")
},
new CountryData
{
CountryName = "USA" , CountryCapital ="Washington" , CountryFlag= GetImageSource("/Images/usaflag.jpg")
},
new CountryData
{
CountryName = "France" , CountryCapital ="Paris" , CountryFlag= GetImageSource("/Images/franceflag.jpg")
},
new CountryData
{
CountryName = "England" , CountryCapital ="London" , CountryFlag= GetImageSource("/Images/englandflag.jpg")
},
new CountryData
{
CountryName = "Germany" , CountryCapital ="Berlin" , CountryFlag= GetImageSource("/Images/germanyflag.jpg")
},
new CountryData
{
CountryName = "China" , CountryCapital ="Shanghai" , CountryFlag= GetImageSource("/Images/chinaflag.jpg")
},
new CountryData
{
CountryName = "Japan" , CountryCapital ="Tokyo" , CountryFlag= GetImageSource("/Images/japanflag.jpg")
},
new CountryData
{
CountryName = "Australia" , CountryCapital ="Canberra" , CountryFlag= GetImageSource("/Images/ausflag.jpg")
},
new CountryData
{
CountryName = "Brazil" , CountryCapital ="Rio" , CountryFlag= GetImageSource("/Images/brazilflag.jpg")
},

};
return lstCountryData;
}

GetImageSource function is defined as following. This function is taking image path as string and converting that to ImageSource such that directly can be bind to Image control.

private ImageSource GetImageSource(string fileName)
{
return new BitmapImage(new Uri(fileName, UriKind.Relative));
}

Finally you need to set SuggestionSource of radAutoCompleteBox. You can set that in page constructor as given below,

public MainPage()
{
InitializeComponent();
this.radAutoCompleteBox.SuggestionsSource = GetCountryDetails();

}

Now you need to put radAutoCompleteBox on xaml. We are filtering on a SuggestionSource consist of complex objects so you need to set the value of property FilterKeyPath. You can set value of this property to any property of the object. In this case we are filtering on CountryName. SuggestionSelected event gets fired when user selects an item from the popup.

By now you have created radAutoCompleteBox and bind to a SuggestionSource of complex objects. Next we need to create SuggestionTemplate. SuggetionTemplate defines the way data from complex object bind as SuggestionSource will be displayed in the suggestion popup. Since there are three properties in the object and one of them is an image. So simply we have put a StackPanel with horizontal orientation and binding properties value in controls inside the StackPanel.

Last but not least we want items highlighting on filtering. We want to highlight item on property set as FilterKeyPath. We set CountryName as FilterKeyPath. You can highlight item on filtering as following. You can set highlight style on background or foreground.

Consolidating codes from above discussion you will have XAML as following. There is one StackPanel in second row of Grid. On selection of an item, that item will get displayed in controls inside StackPanel.

<phone:PhoneApplicationPage
x:Class="Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DEMO RAD CONTROLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Autocomplete" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />

</Grid.RowDefinitions>

<telerikInput:RadAutoCompleteBox x:Name="radAutoCompleteBox"
Height="100"
AutoCompleteMode="Contains"
FilterKeyPath="CountryName"
SuggestionSelected="radAutoCompleteBox_SuggestionSelected"
Margin="-6,19,6,185">

<telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding CountryFlag}" Height="60" Width="60" />
<TextBlock Text="{Binding CountryName}"
telerikInput:RadAutoCompleteBox.IsElementHighlighted="True">
<telerikInput:RadAutoCompleteBox.HighlightStyle>
<telerikInput:HighlightStyle Foreground="Red" FontSize="26"/>
</telerikInput:RadAutoCompleteBox.HighlightStyle>
</TextBlock>
<TextBlock Text="," />
<TextBlock Text="{Binding CountryCapital}" />
</StackPanel>
</DataTemplate>
</telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>

</telerikInput:RadAutoCompleteBox>

<StackPanel Grid.Row="1" Orientation="Vertical">
<Image x:Name="imgMessage" Height="250" Width="200" />
<TextBlock  x:Name="txtMessage"  FontSize="40" Style="{StaticResource PhoneTextAccentStyle }"/>
</StackPanel>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

Last but not least you need to handle SuggestionSelected event. In this event we will bind selected item in controls inside StackPanel.

private void radAutoCompleteBox_SuggestionSelected(object sender, SuggestionSelectedEventArgs e)
{

CountryData data  = e.SelectedSuggestion as CountryData;
radAutoCompleteBox.Text = data.CountryName + "," + data.CountryCapital;
txtMessage.Text = "You selected " + data.CountryName;
imgMessage.Source = data.CountryFlag;
}

Now if you go ahead and run the application you should get experience of radAutoCompleteBox as following

In this way you can work with radAutoCompleteBox. I hope you find this post useful. Thanks for reading.