使用MahApps.Metro进行带下拉列表的增量搜索

本文关键字：搜索 下拉列表 行带 MahApps Metro 使用 | 更新日期: 2023-09-27 17:59:37

有人能指导我如何在文本输入中实现增量搜索吗？在文本输入字段下，备选项显示在下拉列表中？

问题区域

我们已经能够在对话框中实现增量搜索，但不太了解如何从文本字段设计和实现它。我们需要组合哪些组件/控件/元素，以及如何将它们连接起来？我们使用的是MahApps.Metro的1.1.2版本，并且认为切换到alpha之前的版本有点麻烦。

一个小例子

假设我们正在查找名称，并且在字段中键入了sa，那么我们希望有一个带有该前缀的名称的下拉列表，即Samantha、Sara、Sarah、Savannah、more ...

使用MahApps.Metro进行带下拉列表的增量搜索

为了实现它，您需要一个文本框和一个弹出窗口。关于如何实现你想要的，有一个非常粗略的例子。a视图模型：

[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];
    }
}

查看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>

为了简化我使用Fody.PropertyChanged的代码，请考虑它将对OnSelectedSearchItemChanged和OnSearchTextChanged的调用注入到SelectedSearchItem和SearchText属性设置器。

相关文章：