New to Telerik UI for WPF? Download free 30-day trial

Getting Started

This tutorial will walk you through the creation of a sample application that contains a RadAutoSuggestBox control.

Assembly References

In order to use RadAutoSuggestBox, you will need to add references to the following assemblies:

  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.Input

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

Defining RadAutoSuggestBox

RadAutoSuggestBox allows you to visualize a list of search results on demand when you enter text. When the text in the control changes, the TextChanged event is fired, where you can filter the ItemsSource of the control. This will open the drop down and display the filtered items.

In the following example you will see a sample data provider that returns a list of countries that is filtered and displayed on text changed.

Example 1: Creating sample data provider

public static class CountryDataProvider 
    private static List<CountryInfo> Countries { get; set; } 
    static CountryDataProvider() 
        Countries = new List<CountryInfo>(); 
        var cultures = CultureInfo.GetCultures(CultureTypes.SpecificCultures); 
        foreach (CultureInfo culture in cultures) 
            var regionInfo = new RegionInfo(culture.LCID); 
            if (!Countries.Any(x => x.Name.Equals(regionInfo.EnglishName))) 
                Countries.Add(new CountryInfo() { Name = regionInfo.EnglishName }); 
    public static List<CountryInfo> GetCountriesByText(string searchText) 
        var result = new List<CountryInfo>(); 
        var lowerText = searchText.ToLowerInvariant(); 
        return Countries.Where(x => x.Name.ToLowerInvariant().Contains(lowerText)).ToList(); 
public class CountryInfo 
    public string Name { get; set; } 

Example 2: Defining RadAutoSuggestBox and subscribing to TextChanged

<telerik:RadAutoSuggestBox x:Name="radAutoSuggestBox" 
                           WatermarkContent="Type here"  
                           NoResultsContent="No results found" /> 

Example 3: Implementing filtering in the TextChanged event handler

private void RadAutoSuggestBox_TextChanged(object sender, Controls.AutoSuggestBox.TextChangedEventArgs e) 
    if (e.Reason == TextChangeReason.UserInput) 
        this.radAutoSuggestBox.ItemsSource = CountryDataProvider.GetCountriesByText(this.radAutoSuggestBox.Text); 
The definition in Example 2 has few additional settings:
  • DisplayMemberPath: Specifies the property path used to get the value displayed for each data item in the drop down of the RadAutoSuggestBox control.
  • TextMemberPath: Specifies the property path used to get the value displayed in the TextBox of the control.
  • WatermarkContent: Specifies the value displayed in the TextBox of the control when no text is entered.
  • NoResultsContent: Specifies the value displayed in the drop down when no results are presented in the ItemsSource of the control.

Use the Text property to get or set the current query or suggestion text.

Figure 1: Watermark content when no text is entered

Figure 2: Filtered results in the drop down

Figure 3: No result

After selecting an item from the drop down list or click on the query icon, you can use QuerySubmitted and SuggestionChosen events to execute additional actions.

Open Drop Down Manually

The drop down of the control can be opened or closed manually by setting its IsDropDownOpen property.

Example 2: Setting IsDropDownOpen

<telerik:RadAutoSuggestBox IsDropDownOpen="True" /> 

Customizing Appearance

RadAutoSuggestBox allows you to customize the appearance of its TextBox, buttons and items. You can read more about this in the Customizing Appearance section of the control's documentation.

See Also

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