Autosuggest Textbox for WPF


In this post i will share to everyone how to make an auto suggest TextBox in wpf like GOOGLE Textbox.
For this i create a grid whose first row contains a textbox and the second row contains a Listbox. Now, when the textbox gets the focus and its text changes due to the user’s input then fill up the listbox.
Here is the XAML code

<Grid>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="111,46,0,0" Name="txtAutoSuggestName" VerticalAlignment="Top" Width="161" PreviewKeyDown="txtAutoSuggestName_PreviewKeyDown" TextChanged="txtAutoSuggestName_TextChanged" />
        <ListBox Height="Auto" HorizontalAlignment="Left" Margin="111,69,0,0" Name="listBoxSuggestion" VerticalAlignment="Top" Width="161" Visibility="Hidden" PreviewKeyDown="listBoxSuggestion_PreviewKeyDown" KeyDown="listBoxSuggestion_KeyDown" />
    </Grid>

Now this is CS code for glorious effect in textbox

 private void txtAutoSuggestName_TextChanged(object sender, TextChangedEventArgs e)
        {
            listBoxSuggestion.Items.Clear();
            if (txtAutoSuggestName.Text != "")
            {
                List<Customer> namelist = CustomerGatewayObj.listShow(txtAutoSuggestName.Text);
                if (namelist.Count > 0)
                {
                    listBoxSuggestion.Visibility = Visibility.Visible;
                    foreach (var obj in namelist)
                    {
                        listBoxSuggestion.Items.Add(obj.id);
                    }
                }
            }
            else
            {
                listBoxSuggestion.Visibility = Visibility.Hidden;
            }
        }

        private void txtAutoSuggestName_PreviewKeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Down)
            {
                listBoxSuggestion.Focus();
            }
        }


        private void listBoxSuggestion_PreviewKeyDown(object sender, KeyEventArgs e)
        {
            if (listBoxSuggestion.SelectedIndex == 0 && e.Key == Key.Up)
            {
                txtAutoSuggestName.Focus();
            }
        }

        private void listBoxSuggestion_KeyDown(object sender, KeyEventArgs e)
        {
            if (listBoxSuggestion.SelectedIndex > -1)
            {
                if (e.Key == Key.Enter)
                {
                    txtAutoSuggestName.Text = listBoxSuggestion.SelectedItem.ToString();
                }
            }
        }
Advertisements

7 Responses to “Autosuggest Textbox for WPF”

  1. Kzmp Says:

    Hi,
    Thanks for sharing your code. I wanted to show you an alternative implementation with quite a few more features here: http://code.google.com/p/kocontrols/downloads/list

    • refat38 Says:

      I saw your exe file and your program contains too many feature.
      Actually due to my short time i cannot post this solution another way.

  2. Parthiban Says:

    Tnz boss.

  3. Tomi Says:

    Where did you get CustomerGatewayObj?

    • refat38 Says:

      CustomerGatewayObj is my defined business layer object and listshow is a method to get customer related information from database.

      • yonni Says:

        Wait I dont understand what that means. Defined business layer. It flags an error when i past the code, what should i do please

  4. shotgun1945 Says:

    Awesome!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: