create autocomplete feature

Question

Hello

While developing a Win form application, we were able to create an auto-complete feature for combo boxes and text boxes. In other words, when the user started to enter values, it was possible to choose from the suggestions.

Can we do the same application in wpf applications? In other words, when the user enters a value, can we offer suggestions from the data stored in the database?

Thanks.

Answer

Hi,@fatih uyanık. Welcome Microsoft Q&A.

For create an auto-complete feature for ComboBox in wpf, you could refer to the following solution.

Xaml:

Codebedhind:

 public class ViewModel : INotifyPropertyChanged
    {
      
        static String connectionString = @"connstring";
        SqlConnection con;
        SqlCommand cmd;
        SqlDataAdapter adapter;
        DataSet ds;
  
        public String txtSelectedItem { get; set; }
        private ObservableCollection countries;
        public ObservableCollection Countries
        {
            get
            {
                return countries;
            }
            set { countries = value; OnPropertyChanged("Countries"); }
        }
        public void FillList()
        {
            try
            {
                con = new SqlConnection(connectionString);
                con.Open();
                cmd = new SqlCommand("select * from [dbo].[Country]", con);
                adapter = new SqlDataAdapter(cmd);
                ds = new DataSet();
                adapter.Fill(ds, "tblCountries");

                if (Countries == null)
                    Countries = new ObservableCollection();

                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    Countries.Add(new Country
                    {
                        CountryId = Convert.ToInt32(dr[0].ToString()),
                        CountryName = dr[1].ToString(),

                    });
                }
            }
            catch (Exception ex)
            {

            }
            finally
            {
                ds = null;
                adapter.Dispose();
                con.Close();
                con.Dispose();
            }
        }
      
        public ViewModel()
        {
            Countries = new ObservableCollection();

            txtSelectedItem = "Please select a country";
            FillList();
           
        }
        public event PropertyChangedEventHandler PropertyChanged;
        internal void OnPropertyChanged([CallerMemberName] string propName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    }

    public class Country
    {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
        public override string ToString()
        {
            return CountryName;
        }
    }

    class MyComboBox : DependencyObject
    {
        public static readonly DependencyProperty IsFilterOnAutocompleteEnabledProperty =
          DependencyProperty.RegisterAttached(
            "IsFilterOnAutocompleteEnabled",
            typeof(bool),
            typeof(MyComboBox),
            new PropertyMetadata(default(bool), MyComboBox.OnIsFilterOnAutocompleteEnabledChanged));

        public static void SetIsFilterOnAutocompleteEnabled(DependencyObject attachingElement, bool value) =>
          attachingElement.SetValue(MyComboBox.IsFilterOnAutocompleteEnabledProperty, value);

        public static bool GetIsFilterOnAutocompleteEnabled(DependencyObject attachingElement) =>
          (bool)attachingElement.GetValue(MyComboBox.IsFilterOnAutocompleteEnabledProperty);
        // Use hash tables for faster lookup  
        private static Dictionary TextBoxComboBoxMap { get; }
        private static Dictionary TextBoxSelectionStartMap { get; }
        private static Dictionary ComboBoxTextBoxMap { get; }
        private static bool IsNavigationKeyPressed { get; set; }

        static MyComboBox()
        {
            MyComboBox.TextBoxComboBoxMap = new Dictionary();
            MyComboBox.TextBoxSelectionStartMap = new Dictionary();
            MyComboBox.ComboBoxTextBoxMap = new Dictionary();
        }
        private static void OnIsFilterOnAutocompleteEnabledChanged(
          DependencyObject attachingElement,
          DependencyPropertyChangedEventArgs e)
        {
            if (!(attachingElement is ComboBox comboBox && comboBox.IsEditable))
            {
                return;
            }
            if (!(bool)e.NewValue)
            {
                MyComboBox.DisableAutocompleteFilter(comboBox);
                return;
            }

            if (!comboBox.IsLoaded)
            {
                comboBox.Loaded += MyComboBox.EnableAutocompleteFilterOnComboBoxLoaded;
                return;
            }
            MyComboBox.EnableAutocompleteFilter(comboBox);
        }

        private static async void FilterOnTextInput(object sender, TextChangedEventArgs e)
        {
            await Application.Current.Dispatcher.InvokeAsync(
              () =>
              {
                  if (MyComboBox.IsNavigationKeyPressed)
                  {
                      return;
                  }

                  var textBox = sender as TextBox;
                  int textBoxSelectionStart = textBox.SelectionStart;
                  MyComboBox.TextBoxSelectionStartMap[textBox] = textBoxSelectionStart;

                  string changedTextOnAutocomplete = textBox.Text.Substring(0, textBoxSelectionStart);
                  if (MyComboBox.TextBoxComboBoxMap.TryGetValue(
              textBox, out ComboBox comboBox))
                  {
                      comboBox.Items.Filter = item => item.ToString().StartsWith(
                  changedTextOnAutocomplete,
                  StringComparison.OrdinalIgnoreCase);
                  }
              },
              DispatcherPriority.Background);
        }

        private static async void HandleKeyDownWhileFiltering(object sender, KeyEventArgs e)
        {
            var comboBox = sender as ComboBox;
            if (!MyComboBox.ComboBoxTextBoxMap.TryGetValue(comboBox, out TextBox textBox))
            {
                return;
            }

            switch (e.Key)
            {
                case Key.Down
                  when comboBox.Items.CurrentPosition < comboBox.Items.Count - 1
                       && comboBox.Items.MoveCurrentToNext():
                case Key.Up
                  when comboBox.Items.CurrentPosition > 0
                       && comboBox.Items.MoveCurrentToPrevious():
                    {
                        MyComboBox.IsNavigationKeyPressed = true;

                        await Application.Current.Dispatcher.InvokeAsync(
                          () =>
                          {
                              MyComboBox.SelectCurrentItem(textBox, comboBox);
                              MyComboBox.IsNavigationKeyPressed = false;
                          },
                          DispatcherPriority.ContextIdle);

                        break;
                    }
            }
        }
        private static void SelectCurrentItem(TextBox textBox, ComboBox comboBox)
        {
            comboBox.SelectedItem = comboBox.Items.CurrentItem;
            if (MyComboBox.TextBoxSelectionStartMap.TryGetValue(textBox, out int selectionStart))
            {
                textBox.SelectionStart = selectionStart;
            }
        }
        private static void EnableAutocompleteFilterOnComboBoxLoaded(object sender, RoutedEventArgs e)
        {
            var comboBox = sender as ComboBox;
            MyComboBox.EnableAutocompleteFilter(comboBox);
        }
        private static void EnableAutocompleteFilter(ComboBox comboBox)
        {
            if (comboBox.TryFindVisualChildElement(out TextBox editTextBox))
            {
                MyComboBox.TextBoxComboBoxMap.Add(editTextBox, comboBox);
                MyComboBox.ComboBoxTextBoxMap.Add(comboBox, editTextBox);
                editTextBox.TextChanged += MyComboBox.FilterOnTextInput;
                comboBox.AddHandler(UIElement.PreviewKeyDownEvent, new KeyEventHandler(HandleKeyDownWhileFiltering), true);
            }
        }
        private static void DisableAutocompleteFilter(ComboBox comboBox)
        {
            if (comboBox.TryFindVisualChildElement(out TextBox editTextBox))
            {
                MyComboBox.TextBoxComboBoxMap.Remove(editTextBox);
                editTextBox.TextChanged -= MyComboBox.FilterOnTextInput;
            }
        }
    }

    public static class Extensions
    {
        public static bool TryFindVisualChildElement(this DependencyObject parent, out TChild resultElement)
          where TChild : DependencyObject
        {
            resultElement = null;

            if (parent is Popup popup)
            {
                parent = popup.Child;
                if (parent == null)
                {
                    return false;
                }
            }

            for (var childIndex = 0; childIndex < VisualTreeHelper.GetChildrenCount(parent); childIndex++)
            {
                DependencyObject childElement = VisualTreeHelper.GetChild(parent, childIndex);
                if (childElement is TChild child)
                {
                    resultElement = child;
                    return true;
                }

                if (childElement.TryFindVisualChildElement(out resultElement))
                {
                    return true;
                }
            }
            return false;
        }
    }

The result:

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

create autocomplete feature

1 answer

Your answer