AutoComplete TextBox In WPF

In this article, you will learn about AutoComplete TextBox in WPF.

I was always curious about a multi-column AutoComplete textbox with header,  and especially an autocomplete textbox in which  an AutoComplete Popup list can be placed anywhere as per our wish. So, I have developed an AutoComplete textbox as per my needs (In WPF, C#). You can have look at it in the below image.

AutoComplete List displays at the bottom of control. (without style),
 
AutoComplete TextBox In WPF
 
AutoComplete List displays at the right side of window. (without style),
 
AutoComplete TextBox In WPF
 
AutoComplete List displays at bottom of control. (with style),
 
AutoComplete TextBox In WPF
 
AutoComplete List Displays at right side of window. (with style),
 
 AutoComplete TextBox In WPF

 
How to create AutoComplete TextBox in WPF

 
Create A WPF App project
 
(Open Visual Studio -> File -> New -> Project -> Select “WPF App” -> Type name as “WPFControls” – Here I have used Visual Studio 2017)
 
AutoComplete TextBox In WPF
 
Create a directory (Namespace) under project as “Controls” and add a class “AutoCompleteTextBox.cs” in that directory.
 
AutoComplete TextBox In WPF
 
Now, In “AutoCompleteTextBox.cs” we are writing our logic to create AutoCompleteTextBox.

AutoComplete TextBox In WPF

Here we have to Inherit Control class in AutoCompleteTextBox to get properties, events, and methods of “Control” class.

Now, Declare custom properties (DependencyProperty) for our AutoCompleteTextBox. As follows.

  1. public static readonly DependencyProperty AutoCompleteColumnsProperty = DependencyProperty.Register("AutoCompleteColumns"typeof(ObservableCollection<DataGridColumn>), typeof(AutoCompleteTextBox));  
  2.   
  3.         public ObservableCollection<DataGridColumn> AutoCompleteColumns  
  4.         {  
  5.             get  
  6.             {  
  7.                 return (ObservableCollection<DataGridColumn>)GetValue(AutoCompleteColumnsProperty);  
  8.             }  
  9.             set  
  10.             {  
  11.                 SetValue(AutoCompleteColumnsProperty, value);  
  12.             }  
  13.         }  
 The property “AutoCompleteColumns” contains the column for AutoComplete List. This allows the programmer to define columns from design (xaml) code.
  1. public static readonly DependencyProperty AutoCompleteItemSourceProperty = DependencyProperty.Register("AutoCompleteItemSource"typeof(IEnumerable<object>), typeof(AutoCompleteTextBox));  
  2.   
  3.         public IEnumerable<object> AutoCompleteItemSource  
  4.         {  
  5.             get  
  6.             {  
  7.                 return (IEnumerable<object>)GetValue(AutoCompleteItemSourceProperty);  
  8.             }  
  9.             set  
  10.             {  
  11.                 SetValue(AutoCompleteItemSourceProperty, value);  
  12.             }  
  13.         }  
 “AutoCompleteItemSource” is a collection (IEnumerable<object>) to hold the Items for AutoCompleteList.
  1. public static readonly DependencyProperty SelectedItemProperty = DependencyProperty.Register("SelectedItem"typeof(object), typeof(AutoCompleteTextBox));  
  2.   
  3.         public object SelectedItem  
  4.         {  
  5.             get  
  6.             {  
  7.                 return GetValue(SelectedItemProperty);  
  8.             }  
  9.             set  
  10.             {  
  11.                 SetValue(SelectedItemProperty, value);  
  12.   
  13.                 if (value != null)  
  14.                 {  
  15.                     TXT_SEARCHINPUT.Text = value.ToString();  
  16.                     TXT_SEARCHINPUT.Select(TXT_SEARCHINPUT.Text.Length, 0);  
  17.                 }  
  18.   
  19.                 if (this.OnSelectedItemChange != null)  
  20.                     this.OnSelectedItemChange.Invoke(thisnew EventArgs());  
  21.             }  
  22.         }  

“SelectedItem” is used for Item selected from AutoComplete List by user.

  1. public static readonly DependencyProperty AutoCompletePlacementDependencyProperty = DependencyProperty.Register("AutoCompletePlacement"typeof(PlacementMode), typeof(AutoCompleteTextBox));  
  2.   
  3.         public PlacementMode AutoCompletePlacement  
  4.         {  
  5.             get  
  6.             {  
  7.                 return (PlacementMode)GetValue(AutoCompletePlacementDependencyProperty);  
  8.             }  
  9.             set  
  10.             {  
  11.                 SetValue(AutoCompletePlacementDependencyProperty, value);  
  12.             }  
  13.         }  

“AutoCompletePlacement” property allows the programmer to define AutoCompleteList Popup placement (for eg. Left, Right, Bottom, Absolute)

  1. public static readonly DependencyProperty AutoCompletePlacementTargetDependencyProperty = DependencyProperty.Register("AutoCompletePlacementTarget"typeof(UIElement), typeof(AutoCompleteTextBox));  
  2.   
  3.         public UIElement AutoCompletePlacementTarget  
  4.         {  
  5.             get  
  6.             {  
  7.                 return (UIElement)GetValue(AutoCompletePlacementTargetDependencyProperty);  
  8.             }  
  9.             set  
  10.             {  
  11.                 SetValue(AutoCompletePlacementTargetDependencyProperty, value);  
  12.             }  
  13.         }  

“AutoCompletePlacementTarget” defines the control related to AutoComplete Popup placement.

  1. public static readonly DependencyProperty AutoCompleteHorizontalOffsetDependencyProperty = DependencyProperty.Register("AutoCompleteHorizontalOffset"typeof(double), typeof(AutoCompleteTextBox));  
  2.   
  3.         public double AutoCompleteHorizontalOffset  
  4.         {  
  5.             get { return (double)GetValue(AutoCompleteHorizontalOffsetDependencyProperty); }  
  6.             set { SetValue(AutoCompleteHorizontalOffsetDependencyProperty, value); }  
  7.         }  
  8.   
  9. public static readonly DependencyProperty AutoCompleteVerticalOffsetDependencyProperty = DependencyProperty.Register("AutoCompleteVerticalOffset"typeof(double), typeof(AutoCompleteTextBox));  
  10.   
  11.         public double AutoCompleteVerticalOffset  
  12.         {  
  13.             get { return (double)GetValue(AutoCompleteVerticalOffsetDependencyProperty); }  
  14.             set { SetValue(AutoCompleteVerticalOffsetDependencyProperty, value); }  
  15.         }  

“AutoCompleteHorizontalOffset” and “AutoCompleteVerticalOffset” allows you to set horizontal/vertical offset of AutoCompleteList Popup.

  1. public static readonly DependencyProperty AutoCompleteWidthDependencyProperty = DependencyProperty.Register("AutoCompleteWidth"typeof(double), typeof(AutoCompleteTextBox));  
  2.   
  3.         public double AutoCompleteWidth  
  4.         {  
  5.             get { return (double)GetValue(AutoCompleteWidthDependencyProperty); }  
  6.             set  
  7.             {  
  8.                 SetValue(AutoCompleteWidthDependencyProperty, value);  
  9.             }  
  10.         }  
  11.   
  12.   
  13.   
  14.         public static readonly DependencyProperty AutoCompleteHeightDependencyProperty = DependencyProperty.Register("AutoCompleteHeight"typeof(double), typeof(AutoCompleteTextBox));  
  15.   
  16.         public double AutoCompleteHeight  
  17.         {  
  18.             get { return (double)GetValue(AutoCompleteHeightDependencyProperty); }  
  19.             set  
  20.             {  
  21.                 SetValue(AutoCompleteHeightDependencyProperty, value);  
  22.             }  
  23.         }  
“AutoCompleteWidth” and “AutoCompleteHeight” define the width and height of AutoComplete Popup.

Define Controls and Events Used For AutoCompleteTextBox,

  1. private TextBox TXT_SEARCHINPUT;//For user input  
  2.         private Popup PUP_AC;// For AutoCompleteList Popup  
  3.         private DataGrid DG_AC;// DataGrid To Display List Of Filtered Items  
  4.   
  5.       
  6.         // allows programmer to filter records as per input  
  7.         public event TextChangedEventHandler OnTextChange;  
  8.         // event to perform operation on ItemSelection Changed  
  9.         public event EventHandler OnSelectedItemChange;  
  10.   
  11.         public AutoCompleteTextBox()  
  12.         {  
  13.             AutoCompleteColumns = new ObservableCollection<DataGridColumn>();   
  14.         }  
  15.   
  16.           
  17.         public override void OnApplyTemplate()  
  18.         {  
  19.             base.OnApplyTemplate();  
  20.   
  21.             TXT_SEARCHINPUT = this.Template.FindName("TXT_SEARCHINPUT"thisas TextBox;   
  22.             TXT_SEARCHINPUT.TextChanged += TXT_SEARCHINPUT_TextChanged;  
  23.             TXT_SEARCHINPUT.PreviewKeyDown += TXT_SEARCHINPUT_PreviewKeyDown;  
  24.   
  25.             PUP_AC = this.Template.FindName("PUP_AC"thisas Popup;  
  26.   
  27.             DG_AC = this.Template.FindName("DG_AC"thisas DataGrid;  
  28.             DG_AC.MouseLeftButtonUp += DG_AC_MouseLeftButtonUp;  
  29.             foreach (DataGridColumn column in AutoCompleteColumns)  
  30.                 DG_AC.Columns.Add(column);  
  31.         }  

“OnApplyTemplate()” is used to find and initialize controls from ControlTemplate defined in “AutoCompleteTextBox.xaml”.

  1. //Select Item From List On Mouse Click  
  2.         private void DG_AC_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)  
  3.         {  
  4.             var item = DG_AC.SelectedItem;  
  5.             if (item == null)  
  6.             {  
  7.                 this.SelectedItem = null;  
  8.                 return;  
  9.             }  
  10.   
  11.             if (PUP_AC.IsOpen)  
  12.             {  
  13.                 this.SelectedItem = item;  
  14.                 PUP_AC.IsOpen = false;  
  15.             }  
  16.         }  
  17.   
  18.   
  19. // Navigates through Items using Up/Down keyboard keys and select item on Enter key  
  20.         private void TXT_SEARCHINPUT_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)  
  21.         {  
  22.             if (e.Key == System.Windows.Input.Key.Down)  
  23.             {  
  24.                 if (DG_AC.Items.Count > 0)  
  25.                 {  
  26.                     int SelectedIndex = DG_AC.SelectedIndex;  
  27.                     if (SelectedIndex < DG_AC.Items.Count)  
  28.                         DG_AC.SelectedIndex++;  
  29.                 }  
  30.             }  
  31.             else if (e.Key == System.Windows.Input.Key.Up)  
  32.             {  
  33.                 if (DG_AC.Items.Count > 0)  
  34.                 {  
  35.                     int SelectedIndex = DG_AC.SelectedIndex;  
  36.                     if (SelectedIndex > 0)  
  37.                         DG_AC.SelectedIndex--;  
  38.                 }  
  39.             }  
  40.             else if (e.Key == System.Windows.Input.Key.Enter)  
  41.             {  
  42.                 var item = DG_AC.SelectedItem;  
  43.                 if (item == null)  
  44.                 {  
  45.                     this.SelectedItem = null;  
  46.                     return;  
  47.                 }  
  48.   
  49.                 if (PUP_AC.IsOpen)  
  50.                 {  
  51.                     this.SelectedItem = item;  
  52.                     PUP_AC.IsOpen = false;  
  53.                 }  
  54.   
  55.             }  
  56.         }  
  57.   
  58.         //Displays AutoComplete Pupup On User Input And Fire Event  'OnTextChange' to filter records  
  59.         private void TXT_SEARCHINPUT_TextChanged(object sender, TextChangedEventArgs e)  
  60.         {  
  61.             if (SelectedItem != null && SelectedItem.ToString() != TXT_SEARCHINPUT.Text)  
  62.                 this.SelectedItem = null;  
  63.   
  64.             if (string.IsNullOrEmpty(TXT_SEARCHINPUT.Text))  
  65.             {  
  66.                 PUP_AC.IsOpen = false;  
  67.             }  
  68.             else  
  69.             {  
  70.                 PUP_AC.IsOpen = true;  
  71.             }  
  72.   
  73.             if (this.OnTextChange != null)  
  74.                 this.OnTextChange.Invoke(sender, e);  
  75.         }  
The complete code of AutoCompleteTextBox.cs will look like:
 
AutoComplete TextBox In WPF

Design ControlTemplate For AutoCompleteTextBox In “AutoCompleteTextBox.xaml”

(Create a directory under project as “Resources” and add ResourceDictionary named “AutoCompleteTextBox.xaml” and write the following code in it.) as shown in fig.

AutoComplete TextBox In WPF
  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
  3.                     xmlns:controls="clr-namespace:WPFControls.Controls" >  
  4.   
  5.     <Style TargetType="{x:Type controls:AutoCompleteTextBox}">  
  6.         <Setter Property="Template">  
  7.             <Setter.Value>  
  8.                 <ControlTemplate TargetType="{x:Type controls:AutoCompleteTextBox}">  
  9.                     <Grid>  
  10.                         <Grid.RowDefinitions>  
  11.                             <RowDefinition Height="*"></RowDefinition>  
  12.                         </Grid.RowDefinitions>  
  13.                         <Grid.ColumnDefinitions>  
  14.                             <ColumnDefinition Width="*"></ColumnDefinition>  
  15.                         </Grid.ColumnDefinitions>  
  16.   
  17.                         <!-- Input TextBoxt -->  
  18.                         <TextBox x:Name="TXT_SEARCHINPUT" Grid.Row="0" Grid.Column="0"></TextBox>  
  19.                         <!-- Popup to display records-->  
  20.                         <Popup x:Name="PUP_AC"   
  21.                                StaysOpen="False"  
  22.                                Placement="{Binding Path=AutoCompletePlacement, RelativeSource={RelativeSource TemplatedParent}}"  
  23.                                PlacementTarget="{Binding Path=AutoCompletePlacementTarget, RelativeSource={RelativeSource TemplatedParent}}"  
  24.                                HorizontalOffset="{Binding Path=AutoCompleteHorizontalOffset, RelativeSource={RelativeSource TemplatedParent}}"  
  25.                                VerticalOffset="{Binding Path=AutoCompleteVerticalOffset, RelativeSource={RelativeSource TemplatedParent}}"   
  26.                                >  
  27.                             <Grid>  
  28.                                 <Grid.RowDefinitions>  
  29.                                     <RowDefinition Height="*"></RowDefinition>  
  30.                                 </Grid.RowDefinitions>  
  31.                                 <Grid.ColumnDefinitions>  
  32.                                     <ColumnDefinition Width="*"></ColumnDefinition>  
  33.                                 </Grid.ColumnDefinitions>  
  34.                                 <Border x:Name="PUP_BDR" Grid.Row="0" Grid.Column="0"  
  35.                                     BorderThickness="1" BorderBrush="#FFF4F4F4" Background="#FFFCFCFC" >  
  36.                                 </Border>  
  37.                                   
  38.                                 <!-- DataGrid For AutoComplete List-->  
  39.                                 <DataGrid x:Name="DG_AC"  Grid.Row="0" Grid.Column="0"   
  40.                                           Width="{Binding Path=AutoCompleteWidth, RelativeSource={RelativeSource TemplatedParent}}"  
  41.                                           Height="{Binding Path=AutoCompleteHeight, RelativeSource={RelativeSource TemplatedParent}}"  
  42.                                           AutoGenerateColumns="False"    
  43.                                           HeadersVisibility="Column"  
  44.                                           CanUserAddRows="False" HorizontalAlignment="Stretch"  
  45.                                           ItemsSource="{TemplateBinding AutoCompleteItemSource}"  
  46.                                           SelectionMode="Single"  
  47.                                           SelectionUnit="FullRow"  
  48.                                           >                                      
  49.                                 </DataGrid>  
  50.                             </Grid>  
  51.                         </Popup>                          
  52.                     </Grid>                        
  53.                 </ControlTemplate>  
  54.             </Setter.Value>  
  55.         </Setter>  
  56.     </Style>  
  57. </ResourceDictionary>  
Now, our AutoCompleteTextBox is ready to use.
 
Step 1
 
Add/Merge “AutoCompleteTextBox.xaml” in “App.xaml” in project.
  1. <Application x:Class="WPFControls.App"  
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.              xmlns:local="clr-namespace:WPFControls"  
  5.              StartupUri="MainWindow.xaml">  
  6.     <Application.Resources>  
  7.         <ResourceDictionary>  
  8.             <ResourceDictionary.MergedDictionaries>  
  9.                 <ResourceDictionary Source="Resources/AutoCompleteTextBox.xaml"></ResourceDictionary>  
  10.             </ResourceDictionary.MergedDictionaries>   
  11.         </ResourceDictionary>  
  12.     </Application.Resources>  
  13. </Application>  

Step 2

Add AutoCompleteTextBox where you want (MainWindow.xaml) as follows.
AutoComplete Placement At Bottom Of Input Control,
  1. <TextBlock Name="tb" Text="Selcted Employee : "></TextBlock>  
  2.        
  3.         <!-- AutoComplete Placement At Bottom Of Input Control-->  
  4.         <controls:AutoCompleteTextBox x:Name="txt"   
  5.                                    AutoCompleteWidth="{Binding ElementName=txt, Path=ActualWidth}"  
  6.                                    AutoCompleteHeight="150"  
  7.                                    AutoCompletePlacementTarget="{Binding ElementName=txt}"  
  8.                                    AutoCompletePlacement="Bottom"  
  9.                                    OnTextChange="Txt_OnTextChange"  
  10.                                    OnSelectedItemChange="Txt_OnSelectedItemChange"  
  11.                                    >  
  12.             <controls:AutoCompleteTextBox.AutoCompleteColumns>  
  13.                 <DataGridTextColumn Header="Id" MinWidth="60" Width="Auto" Binding="{Binding EmployeeId}"></DataGridTextColumn>  
  14.                 <DataGridTextColumn Header="Full Name" Width="*" Binding="{Binding FullName}"></DataGridTextColumn>  
  15.                 <DataGridTextColumn Header="Contact" Width="150" Binding="{Binding Contact}"></DataGridTextColumn>  
  16.                 <DataGridTextColumn Header="Salary" Width="100" Binding="{Binding Salary}"></DataGridTextColumn>  
  17.             </controls:AutoCompleteTextBox.AutoCompleteColumns>  
  18.         </controls:AutoCompleteTextBox>  

AutoComplete Placement at the right side of Window/Panel,

  1. <TextBlock Name="tb2" Text="Selcted Employee : "  Margin="0 20 0 0"></TextBlock>  
  2.          
  3.         <!-- AutoComplete Placement At Right Side Of Window/Panel-->  
  4.         <controls:AutoCompleteTextBox x:Name="txt2"   
  5.                                    Width="300"   
  6.                                    HorizontalAlignment="Left"  
  7.                                    AutoCompleteWidth="430"  
  8.                                    AutoCompleteHorizontalOffset="-430"  
  9.                                    AutoCompleteHeight="{Binding ElementName=pnl, Path=ActualHeight}"    
  10.                                    AutoCompletePlacementTarget="{Binding ElementName=pnl}"  
  11.                                    AutoCompletePlacement="Right"  
  12.                                    OnTextChange="Txt2_OnTextChange"  
  13.                                    OnSelectedItemChange="Txt2_OnSelectedItemChange"  
  14.                                    >  
  15.             <controls:AutoCompleteTextBox.AutoCompleteColumns>  
  16.                 <DataGridTextColumn Header="Id" MinWidth="40" Width="Auto" Binding="{Binding EmployeeId}"></DataGridTextColumn>  
  17.                 <DataGridTextColumn Header="Full Name" Width="*" Binding="{Binding FullName}"></DataGridTextColumn>  
  18.                 <DataGridTextColumn Header="Contact" Width="Auto" Binding="{Binding Contact}"></DataGridTextColumn>  
  19.                 <DataGridTextColumn Header="Salary" Width="Auto" Binding="{Binding Salary}"></DataGridTextColumn>  
  20.             </controls:AutoCompleteTextBox.AutoCompleteColumns>  
  21.         </controls:AutoCompleteTextBox>  

Complete code of “MainWindow.xaml”

  1. <Window x:Class="WPFControls.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:WPFControls"  
  7.         xmlns:controls="clr-namespace:WPFControls.Controls"  
  8.         mc:Ignorable="d"  
  9.         Title="MainWindow" Height="450" Width="800" FontSize="14">  
  10.     <StackPanel Name="pnl" Margin="20">  
  11.         <TextBlock Name="tb" Text="Selcted Employee : "></TextBlock>  
  12.           
  13.         <!-- AutoComplete Placement At Bottom Of Input Control-->  
  14.         <controls:AutoCompleteTextBox x:Name="txt"   
  15.                                    AutoCompleteWidth="{Binding ElementName=txt, Path=ActualWidth}"  
  16.                                    AutoCompleteHeight="150"  
  17.                                    AutoCompletePlacementTarget="{Binding ElementName=txt}"  
  18.                                    AutoCompletePlacement="Bottom"  
  19.                                    OnTextChange="Txt_OnTextChange"  
  20.                                    OnSelectedItemChange="Txt_OnSelectedItemChange"  
  21.                                    >  
  22.             <controls:AutoCompleteTextBox.AutoCompleteColumns>  
  23.                 <DataGridTextColumn Header="Id" MinWidth="60" Width="Auto" Binding="{Binding EmployeeId}"></DataGridTextColumn>  
  24.                 <DataGridTextColumn Header="Full Name" Width="*" Binding="{Binding FullName}"></DataGridTextColumn>  
  25.                 <DataGridTextColumn Header="Contact" Width="150" Binding="{Binding Contact}"></DataGridTextColumn>  
  26.                 <DataGridTextColumn Header="Salary" Width="100" Binding="{Binding Salary}"></DataGridTextColumn>  
  27.             </controls:AutoCompleteTextBox.AutoCompleteColumns>  
  28.         </controls:AutoCompleteTextBox>  
  29.   
  30.         <TextBlock Name="tb2" Text="Selcted Employee : "  Margin="0 20 0 0"></TextBlock>  
  31.           
  32.         <!-- AutoComplete Placement At Right Side Of Window/Panel-->  
  33.         <controls:AutoCompleteTextBox x:Name="txt2"   
  34.                                    Width="300"   
  35.                                    HorizontalAlignment="Left"  
  36.                                    AutoCompleteWidth="430"  
  37.                                    AutoCompleteHorizontalOffset="-430"  
  38.                                    AutoCompleteHeight="{Binding ElementName=pnl, Path=ActualHeight}"    
  39.                                    AutoCompletePlacementTarget="{Binding ElementName=pnl}"  
  40.                                    AutoCompletePlacement="Right"  
  41.                                    OnTextChange="Txt2_OnTextChange"  
  42.                                    OnSelectedItemChange="Txt2_OnSelectedItemChange"  
  43.                                    >  
  44.             <controls:AutoCompleteTextBox.AutoCompleteColumns>  
  45.                 <DataGridTextColumn Header="Id" MinWidth="40" Width="Auto" Binding="{Binding EmployeeId}"></DataGridTextColumn>  
  46.                 <DataGridTextColumn Header="Full Name" Width="*" Binding="{Binding FullName}"></DataGridTextColumn>  
  47.                 <DataGridTextColumn Header="Contact" Width="Auto" Binding="{Binding Contact}"></DataGridTextColumn>  
  48.                 <DataGridTextColumn Header="Salary" Width="Auto" Binding="{Binding Salary}"></DataGridTextColumn>  
  49.             </controls:AutoCompleteTextBox.AutoCompleteColumns>  
  50.         </controls:AutoCompleteTextBox>   
  51.     </StackPanel>  
  52. </Window>  

Now handle OnTextChange and OnSelectedItemChange events of AutoCompleteTextBox in “MainWindow.xaml.cs” (Here we have used an Employee class to demonstrate the working of AutoCompleteTextBox, so create a class “Employee.cs” as follows),

  1. public class Employee  
  2.     {  
  3.         public int EmployeeId { getset; }  
  4.         public string FullName { getset; }  
  5.         public string Contact { getset; }  
  6.         public double Salary { getset; }  
  7.   
  8.         public override string ToString()  
  9.         {  
  10.             return string.Format("{0}", FullName);  
  11.         }  
  12.     }  
Declare a list of Employees for AutoCompleteItemSource,
  1. public List<Employee> Employees;  
  2.         public MainWindow()  
  3.         {  
  4.             InitializeComponent();  
  5.             Employees = new List<Employee>();  
  6.             Employees.Add(new Employee() { EmployeeId = 1, FullName = "Pradnya Prakash Dabhade", Contact = "8806558104", Salary = 75000 });  
  7.             Employees.Add(new Employee() { EmployeeId = 2, FullName = "Sudhanshoo Dnyaneshwar Wadekar", Contact = "9284111845", Salary = 43000 });  
  8.             Employees.Add(new Employee() { EmployeeId = 3, FullName = "Amit Pravin Chavan", Contact = "9545812505", Salary = 58000 });  
  9.             Employees.Add(new Employee() { EmployeeId = 4, FullName = "Aayush Prakash Dabhade", Contact = "8806558104", Salary = 43000 });  
  10.             Employees.Add(new Employee() { EmployeeId = 5, FullName = "Shashank Dnyaneshwar Wadekar", Contact = "9284111845", Salary = 60000 });  
  11.             Employees.Add(new Employee() { EmployeeId = 6, FullName = "Pooja Dnyaneshwar Wadekar", Contact = "9284111845", Salary = 40000 });  
  12.                
  13.         }  
Handle events to filter record and selected item,
  1. private void Txt_OnTextChange(object sender, TextChangedEventArgs e)  
  2.         {  
  3.             TextBox txtInput = sender as TextBox;  
  4.             var Emps = from emp in Employees where emp.FullName.Contains(txtInput.Text) select emp;  
  5.             txt.AutoCompleteItemSource = Emps;  
  6.   
  7.         }  
  8.   
  9.         private void Txt_OnSelectedItemChange(object sender, EventArgs e)  
  10.         {  
  11.             if (txt.SelectedItem == null)  
  12.                 tb.Text = "Selcted Employee :";  
  13.             else  
  14.             {  
  15.                 tb.Text = "Selcted Employee : " + txt.SelectedItem.ToString();  
  16.             }  
  17.         }  
  18.   
  19.         private void Txt2_OnTextChange(object sender, TextChangedEventArgs e)  
  20.         {  
  21.             TextBox txtInput = sender as TextBox;  
  22.             var Emps = from emp in Employees where emp.FullName.Contains(txtInput.Text) select emp;  
  23.             txt2.AutoCompleteItemSource = Emps;  
  24.   
  25.         }  
  26.   
  27.         private void Txt2_OnSelectedItemChange(object sender, EventArgs e)  
  28.         {  
  29.             if (txt2.SelectedItem == null)  
  30.                 tb2.Text = "Selcted Employee :";  
  31.             else  
  32.             {  
  33.                 tb2.Text = "Selcted Employee : " + txt2.SelectedItem.ToString();  
  34.             }  
  35.         }  

Complete code of “MainWindow.xaml.cs”

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Windows;  
  5. using System.Windows.Controls;  
  6.   
  7. namespace WPFControls  
  8. {  
  9.     public partial class MainWindow : Window  
  10.     {  
  11.         public List<Employee> Employees;  
  12.         public MainWindow()  
  13.         {  
  14.             InitializeComponent();  
  15.             Employees = new List<Employee>();  
  16.             Employees.Add(new Employee() { EmployeeId = 1, FullName = "Pradnya Prakash Dabhade", Contact = "8806558104", Salary = 75000 });  
  17.             Employees.Add(new Employee() { EmployeeId = 2, FullName = "Sudhanshoo Dnyaneshwar Wadekar", Contact = "9284111845", Salary = 43000 });  
  18.             Employees.Add(new Employee() { EmployeeId = 3, FullName = "Amit Pravin Chavan", Contact = "9545812505", Salary = 58000 });  
  19.             Employees.Add(new Employee() { EmployeeId = 4, FullName = "Aayush Prakash Dabhade", Contact = "8806558104", Salary = 43000 });  
  20.             Employees.Add(new Employee() { EmployeeId = 5, FullName = "Shashank Dnyaneshwar Wadekar", Contact = "9284111845", Salary = 60000 });  
  21.             Employees.Add(new Employee() { EmployeeId = 6, FullName = "Pooja Dnyaneshwar Wadekar", Contact = "9284111845", Salary = 40000 });  
  22.                
  23.         }  
  24.   
  25.         private void Txt_OnTextChange(object sender, TextChangedEventArgs e)  
  26.         {  
  27.             TextBox txtInput = sender as TextBox;  
  28.             var Emps = from emp in Employees where emp.FullName.Contains(txtInput.Text) select emp;  
  29.             txt.AutoCompleteItemSource = Emps;  
  30.   
  31.         }  
  32.   
  33.         private void Txt_OnSelectedItemChange(object sender, EventArgs e)  
  34.         {  
  35.             if (txt.SelectedItem == null)  
  36.                 tb.Text = "Selcted Employee :";  
  37.             else  
  38.             {  
  39.                 tb.Text = "Selcted Employee : " + txt.SelectedItem.ToString();  
  40.             }  
  41.         }  
  42.   
  43.         private void Txt2_OnTextChange(object sender, TextChangedEventArgs e)  
  44.         {  
  45.             TextBox txtInput = sender as TextBox;  
  46.             var Emps = from emp in Employees where emp.FullName.Contains(txtInput.Text) select emp;  
  47.             txt2.AutoCompleteItemSource = Emps;  
  48.   
  49.         }  
  50.   
  51.         private void Txt2_OnSelectedItemChange(object sender, EventArgs e)  
  52.         {  
  53.             if (txt2.SelectedItem == null)  
  54.                 tb2.Text = "Selcted Employee :";  
  55.             else  
  56.             {  
  57.                 tb2.Text = "Selcted Employee : " + txt2.SelectedItem.ToString();  
  58.             }  
  59.         }  
  60.     }  
  61. }  

Now we are ready to run our project. 

You can design the suggestion style as per your requirement.

Please download the attached project for the proper code/demo.