Retrieving Selected Values in UWP AutoComplete (SfTextBoxExt)
10 May 202124 minutes to read
AutoComplete provides a way to handle the selected item using the SelectedItem property.
SelectedItem
The SelectedItem property is used to select a particular item from the data source. You can either get or set the SelectedItem.
How to set the SelectedItem
The following code snippet demonstrates how to set SelectedItem.
<Page
x:Class="TextBoxExtSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TextBoxExtSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<editors:SfTextBoxExt x:Name="textBoxExt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutoCompleteMode="Suggest"
SelectedItem="India"
Width="200">
</editors:SfTextBoxExt>
</Grid>
</Page>using Syncfusion.UI.Xaml.Controls.Input;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The BlankPage item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409.
namespace TextBoxExtSample
{
/// <summary>
/// An empty page that can be used on its own or navigated within a frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SfTextBoxExt textBoxExt = new SfTextBoxExt()
{
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Width = 200,
AutoCompleteMode = AutoCompleteMode.Suggest,
SelectedItem = "India"
};
List<string> list = new List<string>()
{
"India",
"Uganda",
"Ukraine",
"Canada",
"United Arab Emirates"
};
textBoxExt.AutoCompleteSource = list;
this.Content = textBoxExt;
}
}
}Retrieving selected items
AutoComplete provides a way to get the selected item using the SelectionChanged event.
The following code example demonstrates how to retrieve SelectedItem.
<Page
x:Class="TextBoxExtSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TextBoxExtSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<editors:SfTextBoxExt x:Name="textBoxExt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutoCompleteMode="Suggest"
ShowSuggestionsOnFocus="True"
SelectionChanged="TextBoxExt_SelectionChanged"
Width="200">
</editors:SfTextBoxExt>
</Grid>
</Page>using Syncfusion.UI.Xaml.Controls.Input;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The BlankPage item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409.
namespace TextBoxExtSample
{
/// <summary>
/// An empty page that can be used on its own or navigated within a frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SfTextBoxExt textBoxExt = new SfTextBoxExt()
{
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Width = 200,
AutoCompleteMode = AutoCompleteMode.Suggest,
ShowSuggestionsOnFocus = true
};
textBoxExt.SelectionChanged += TextBoxExt_SelectionChanged;
List<string> list = new List<string>()
{
"India",
"Uganda",
"Ukraine",
"Canada",
"United Arab Emirates"
};
textBoxExt.AutoCompleteSource = list;
this.Content = textBoxExt;
}
private void TextBoxExt_SelectionChanged(object sender, RoutedEventArgs e)
{
string selectedItem = ((sender as SfTextBoxExt).SelectedItem).ToString();
var dialog = new MessageDialog(selectedItem, "SelectedItem");
dialog.ShowAsync();
}
}
}Retrieving selected value
AutoComplete provides a way to get the selected values using the SelectedValue and SelectedIndex properties.
Retrieving the index of selected item
When an item is selected from suggestion list, its index can be retrieved using the SuggestionIndex property.
The SuggestionIndex property holds the index of selected item in suggestion list.
The following code example demonstrates how to retrieve SuggestionIndex.
<Page
x:Class="TextBoxExtSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TextBoxExtSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<editors:SfTextBoxExt x:Name="textBoxExt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutoCompleteMode="Suggest"
ShowSuggestionsOnFocus="True"
SelectionChanged="TextBoxExt_SelectionChanged"
Width="200">
</editors:SfTextBoxExt>
</Grid>
</Page>using Syncfusion.UI.Xaml.Controls.Input;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The BlankPage item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409.
namespace TextBoxExtSample
{
/// <summary>
/// An empty page that can be used on its own or navigated within a frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SfTextBoxExt textBoxExt = new SfTextBoxExt()
{
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Width = 200,
AutoCompleteMode = AutoCompleteMode.Suggest,
ShowSuggestionsOnFocus = true
};
textBoxExt.SelectionChanged += TextBoxExt_SelectionChanged;
List<string> list = new List<string>()
{
"India",
"Uganda",
"Ukraine",
"Canada",
"United Arab Emirates"
};
textBoxExt.AutoCompleteSource = list;
this.Content = textBoxExt;
}
private void TextBoxExt_SelectionChanged(object sender, RoutedEventArgs e)
{
string suggestionIndex = ((sender as SfTextBoxExt).SuggestionIndex).ToString();
var dialog = new MessageDialog(suggestionIndex, "SuggestionIndex");
dialog.ShowAsync();
}
}
}Retrieving the value of selected item
When an item is selected from suggestion list, selected value can be retrieved using the SelectedValue property.
The following code example demonstrates how to retrieve SelectedValue.
<Page
x:Class="TextBoxExtSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TextBoxExtSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<editors:SfTextBoxExt x:Name="textBoxExt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutoCompleteMode="Suggest"
ShowSuggestionsOnFocus="True"
SelectionChanged="TextBoxExt_SelectionChanged"
Width="200">
</editors:SfTextBoxExt>
</Grid>
</Page>using Syncfusion.UI.Xaml.Controls.Input;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The BlankPage item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409.
namespace TextBoxExtSample
{
/// <summary>
/// An empty page that can be used on its own or navigated within a frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SfTextBoxExt textBoxExt = new SfTextBoxExt()
{
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Width = 200,
AutoCompleteMode = AutoCompleteMode.Suggest,
ShowSuggestionsOnFocus = true
};
textBoxExt.SelectionChanged += TextBoxExt_SelectionChanged;
List<string> list = new List<string>()
{
"India",
"Uganda",
"Ukraine",
"Canada",
"United Arab Emirates"
};
textBoxExt.AutoCompleteSource = list;
this.Content = textBoxExt;
}
private void TextBoxExt_SelectionChanged(object sender, RoutedEventArgs e)
{
string selectedValue = ((sender as SfTextBoxExt).SelectedValue).ToString();
var dialog = new MessageDialog(selectedValue, "SelectedValue");
dialog.ShowAsync();
}
}
}Retrieving a member of model object
If the AutoCompleteSource is bound to business object data, there is an additional step to get the SelectedValue. The model class may have one or more properties. So, it is necessary to intimate AutoComplete that which property of model class should be stored in the SelectedValue property. This can be accomplished using the ValueMemberPath property.
<Page
x:Class="TextBoxExtSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TextBoxExtSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
<local:EmployeeViewModel/>
</Page.DataContext>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<editors:SfTextBoxExt x:Name="textBoxExt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutoCompleteMode="Suggest"
ShowSuggestionsOnFocus="True"
SelectionChanged="TextBoxExt_SelectionChanged"
SearchItemPath="ID"
ValueMemberPath="Name"
AutoCompleteSource="{Binding EmployeeCollection}"
Width="200">
</editors:SfTextBoxExt>
</Grid>
</Page>
</ContentPage>using Syncfusion.UI.Xaml.Controls.Input;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The BlankPage item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409.
namespace TextBoxExtSample
{
/// <summary>
/// An empty page that can be used on its own or navigated within a frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void TextBoxExt_SelectionChanged(object sender, RoutedEventArgs e)
{
string selectedValue = ((sender as SfTextBoxExt).SelectedValue).ToString();
var dialog = new MessageDialog(selectedValue, "SelectedValue");
dialog.ShowAsync();
}
}
public class Employee
{
private int id;
public int ID
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
}
public class EmployeeViewModel
{
private ObservableCollection<Employee> employeeCollection;
public ObservableCollection<Employee> EmployeeCollection
{
get { return employeeCollection; }
set { employeeCollection = value; }
}
public EmployeeViewModel()
{
employeeCollection = new ObservableCollection<Employee>();
employeeCollection.Add(new Employee() { ID = 1, Name = "Eric" });
employeeCollection.Add(new Employee() { ID = 2, Name = "James" });
employeeCollection.Add(new Employee() { ID = 3, Name = "Jacob" });
employeeCollection.Add(new Employee() { ID = 4, Name = "Lucas" });
employeeCollection.Add(new Employee() { ID = 5, Name = "Mark" });
}
}
}