How to change the SelectionMode for selecting an item in the Autocomplete control?

2 mins read

Autocomplete control selection mode for selecting items can be set by using the SelectionMode Property. By using this property, the autocomplete Selection mode can be changed as Single, Multiple, Extended.

When the SelectionMode property is set as Single, you can select only one item at a time. Multiple mode allows you to select multiple items by using the SeparatorCharacter and Extented allows you to select multiple items by pressing the Ctrl key.

Refer to the following code examples.

XAML

//Explains how to set the Different SlectionMode in SelectedItem in the AutoComplete Control
<Window x:Class="AutoComplete.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
         <syncfusion:AutoComplete x:Name="Autocomplete" SelectionMode="Extended" HorizontalAlignment="Center" Height="40" DisplayMemberPath="item"  VerticalAlignment="Top" Width="150" Margin="176,125,177,0"  >
  <syncfusion:AutoComplete.CustomSource>
         <local:AutoCompleteList></local:AutoCompleteList>
   </syncfusion:AutoComplete.CustomSource>
  </syncfusion:AutoComplete>
   </Grid>
</Window>

C#

//Explains How to set the Different SlectionMode in Selected Item in the AutoComplete Control
namespace AutoComplete
{
    public partial class MainWindow : Window
    {
        AutoCompleteList obj = new AutoCompleteList();
        public MainWindow()
        {
            InitializeComponent();
            Autocomplete.CustomSource = obj;
            Autocomplete.SelectionMode = SelectionMode.Extended;
        }
    }
    public class AutomComp
    {
        public string item { get; set; }
    }
    public class AutoCompleteList : List<AutomComp>
    {
        public AutoCompleteList()
        {
            this.Add(new AutomComp() { item = "item 1" });
            this.Add(new AutomComp() { item = "item 2" });
            this.Add(new AutomComp() { item = "item 3" });
            this.Add(new AutomComp() { item = "item 4" });
            this.Add(new AutomComp() { item = "item 5" });
            this.Add(new AutomComp() { item = "item 6" });
        }
    }
}

Output:

The following screenshot displays the different types of SelectionMode in the AutoComplete control.

Single

SingleSelectedItem