Creating an autocomplete textbox with dropdown

Question

My Problem:

I have a list of 118 chemical element names. And I wish to make a textbox in which as I type it will throw a dropdown menu with suggestion of names. I made this textbox in winforms and it was piece of cake however my efforts of making it in wpf are in vain. I've tried extended wpf toolkit, nimgoble and some other autocomplete textbox libs. So far dead end...I'm also new to wpf so maybe I'm missing something with these libs? I can't make them list my items and some won't even show the dropdown menu.

Heres what I wanted:

Here's how I finally achieved it:

So I solved this by using a combination of textbox and listbox. Where in textbox user types and as it changes (textbox changed event) it's checking for matches inside a list that holds names of all 118 elements and displays matches for the text typed in, inside listbox. Here's the code:

private void textBox_TextChanged(object sender, TextChangedEventArgs e)
    {

        listBox.Items.Clear();


        if (textBox.Text.Trim() != "")
        {
            string regexPattern = (textBox.Text.ToString()) + "\\w*";
            regexPattern = char.ToUpper(regexPattern[0]) + regexPattern.Substring(1); //prvo slovo veliko

            Match match = Regex.Match(ElementNames.allElements, regexPattern);
            while (match.Success && match.Value != "")
            {
                listBox.Items.Add(match.Value.ToString());
                listBox.Visibility = Visibility.Visible;

                match = match.NextMatch();
            }
        }

            if (listBox.Items.IsEmpty || listBox.Items.Count == 119)
            {
                listBox.Visibility = Visibility.Collapsed;
                if (listBox.Items.Count == 119) listBox.Items.Clear();
            }

        HighlightElementsOnTable();
        OtherButtonsHighlight();
        BringBackColors();
    }

I would reccomment to start very simple. Using the text changed event to see what the user types in. Then print out the resuts you want to show. If this works you can start adding a popup/dropdown to show the results... — Felix D., Mar 30 '16 at 08:46
@FeDe Thanks, I solved the problem using combination of textbox and listbox where and finding match when textbox_changed is fired and listing matches in listbox. Also would anyone mind upvoting or something because I got bad rep on this question, and is preventing me to be further part of this website. Thank you very much..:) — maran, Apr 08 '16 at 18:15
try to change a little of your question. maybe add a pic of what you want, structure it a bit more add a secion of what oyu have tried and i am sure you get some upvotes :D — Felix D., Apr 09 '16 at 09:47

score 15 · Answer 1 · answered Mar 30 '16 at 14:49

15

You can use a ComboBox with IsEditable=true.

answered Mar 30 '16 at 14:49

H.B.

166,899
29
327
400

score 2 · Answer 2 · answered Aug 25 '22 at 16:17

Use a Combobox with

IsEditable = true
SelectedItem and Text data bound to the same property
StaysOpenOnEdit = true

<ComboBox ItemsSource="{Binding Models}" SelectedItem="{Binding Model}" 
 IsEditable="True" StaysOpenOnEdit="True" Text="{Binding Model, UpdateSourceTrigger=PropertyChanged}"/>

Creating an autocomplete textbox with dropdown

2 Answers2