AutoComplete
The main feature of RadAutoCompleteBox control is its AutoComplete functionality. Its behavior can be customized by setting one of the built-in modes.
Changing the AutoCompleteMode
RadAutoCompleteBox control has three built-in AutoCompleteModes - Suggest, Append, SuggestAppend. By default the AutoCompleteMode property is set to SuggestAppend.
In the next examples we will demonstrate the difference between the AutoCompleteModes:
Before proceeding with next examples please read the help article about Binding To Object.
Suggest Mode
In Suggest mode after one or more matches are found they are displayed in the DropDown portion of the control.
The XAML should look like this:
Example 1: Declaring RadAutoCompleteBox with Suggest AutoCompleteMode
<telerik:RadAutoCompleteBox x:Name="autoComleteBox" Width="200"
ItemsSource="{Binding Countries}"
DisplayMemberPath="Name"
AutoCompleteMode="Suggest"/>
The next screenshots show how the control looks in Suggest mode:
Append Mode
In Append mode after one or more matches are found the DropDown portion of the control is hidden and the value in the TextBox is appended with the first matched item.
The XAML should look like this:
Example 2: Declaring RadAutoCompleteBox with Append AutoCompleteMode
<telerik:RadAutoCompleteBox x:Name="autoComleteBox" Width="200"
ItemsSource="{Binding Countries}"
DisplayMemberPath="Name"
AutoCompleteMode="Append"/>
The next screenshots show how the control looks in Append mode:
Suggest and Append Mode
SuggestAppend mode combines the behavior of the two previous modes.
In this mode when input is typed in the textbox of the control the first item in the DropDown portion of the control is not highlighted and appended. The append functionality is triggered when you navigate with the keyboard to a specific item.
The XAML should look like this:
Example 3: Declaring RadAutoCompleteBox with SuggestAppend AutoCompleteMode
<telerik:RadAutoCompleteBox x:Name="autoComleteBox" Width="200"
ItemsSource="{Binding Countries}"
DisplayMemberPath="Name"
AutoCompleteMode="SuggestAppend"/>
The next screenshots show how the control looks in SuggestAppend mode:
