C# WPF autocomplete Combobox with database

Question

I want to create a combo box that works like google search for a field in a database. I added the database as data source in my VS 2015. Can I add then the data set directly to my combo box? Because the database doesn't show up in the data source property of the combo box. I use a MariaDB and the MySQL connector 6.9.8 because in 6.9.9 it seems there is a bug with data set in VS.

Before answering I don´t want to have a method at the start at my program and then bind a List to the combo box...this is not a problem. And wouldn't work for this because because entries can get updated every minute. I want a combo box with real time search in database for entries. Therefore, is there a good solution for this problem? I've looked up some possible solutions but they were only for WinForms or in my case, the data binding to the database doesn't work.

Answer 1

Maybe this will do. Even though it's technically a TextBox, it behaves pretty much exactly like Goolge's search field does, and it's very easy to use.

Basically all you have to do is put an AutoCompleteTextBox in your XAML and bind it to a suggestion provider, which is a class that contains a GetSuggestions method that will get the items from the database.

Foo.cs :

class Foo
{
    public string Label { get; set; }

    public Foo(string p_label)
    {
        Label = p_label;
    }
}

SuggestionProvider.cs :

class SuggestionProvider
{
    public IEnumerable GetSuggestions(string filter)
    {
        var returnList = new List<Foo>();

        foreach(/* Get items from the databse */)
        {
            returnList.Add(new Foo(/* Label from database */));
        }

        return returnList;
    }
}

XAML :

<!-- ... -->

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <TextBlock Text="{Binding Path=Label}"/>
    </DataTemplate>
</Window.Resources>

<!-- ... -->

<WpfControls:AutoCompleteTextBox ItemTemplate="{StaticResource ResourceKey=ItemTemplate}"
                                 Provider="{Binding Path=SuggestionProvider}"
                                 DisplayMember="Label"/>                                  

The SuggestionProvider's GetSuggestions method will be executed every time you type something in the AutoCompleteTextBox's editor (the text field) and will return a list of objects. These objects will then be used to build up the suggestions popup as per the DataTemplate you defined. The AutoCompleteTextBox's DisplayMember property is the member (property) of your object that should be displayed in the editor once an object has been selected.

The SuggestionProvider's filter is the text entered in the editor (search field).

There's a little more work to do if you want it to do something as soon as something is selected (when you click an item), but I can help you with this as well if you need.