Incremental search with dropdown using MahApps.Metro

Question

Can somebody guide me in the right direction for how to implement an incremental search from within a text input, where the alternatives display in a dropdown under the text input field?

Problem areas

We've been able to implement an incremental search within a dialog, but don't quite see how to design and implement it from a text field. Which components/controls/element do we need to combine, and how to connect these? We're using version 1.1.2 of MahApps.Metro, and see it as a little troublesome to switch to a pre-alpha version.

A little example

Say we're looking for names, and we've typed sa into the field, then we would like to have a drop down with names with that prefix, ie Samantha , Sara , Sarah , Savannah , more ...

Answer 1

In order to implement it you will need a textbox and a popup. There is a very rough example of how to achieve what you want. a ViewModel:

[PropertyChanged.ImplementPropertyChanged]
class SearchViewModel
{
    private readonly string[] items;
    public string[] SearchResults { get; private set; }
    public bool IsSearchShown { get; set; }
    public string SearchText { get; set; }

    private void OnSearchTextChanged() 
    {
        UpdateSearchResults();
        IsSearchShown = true;
    }

    public string SelectedSearchItem { get; set; }

    private void OnSelectedSearchItemChanged()
    {
        SearchText = SelectedSearchItem;
        IsSearchShown = false;
    }

    private void UpdateSearchResults()
    {
        SearchResults = items.Where(item => item.StartsWith(SearchText)).ToArray();
    }

    public SearchViewModel(string[] items)
    {
        this.items = items;
        SearchResults = new string[0];
    }
}

view xaml:

<Grid>
    <TextBox Text="{Binding SearchText,UpdateSourceTrigger=PropertyChanged}" x:Name="searchTextBox"/>
    <Popup IsOpen="{Binding IsSearchShown}" PlacementTarget="{Binding ElementName=searchTextBox}">
        <ListBox ItemsSource="{Binding SearchResults}" SelectedItem="{Binding SelectedSearchItem}"/>
    </Popup>
</Grid>

to simplify the code I'm using Fody.PropertyChanged , take into account that it injects calls to OnSelectedSearchItemChanged and OnSearchTextChanged to SelectedSearchItem and SearchText property setters.