blazor - 如何在 mudblazor 中搜索 mudautocomplete 组件时显示多个列。示例附加屏幕截图

Question

如何在 mudblazor 中搜索 mudautocomplete 组件时显示多个列。例子

我们需要做任何定制吗？我是mudblazor的新手。

任何想法或代码片段表示赞赏。

Answer 1

我为您创建了一个包含 MudBlazor 组件的自定义解决方案，您可以在其上进行扩展。要玩它，请查看这个游乐场片段：https ://try.mudblazor.com/snippet/GaQbvwPzyfOfrMyA

这是代码：

<div style="max-width:600px">
<MudTextField @bind-Value="SearchText" Placeholder="Type to search" Immediate="true" @onclick="@(()=>_isOpen=true)" @onkeydown="OnKeyDown"/>
<MudPopover Open="@_isOpen" MaxHeight="300" AnchorOrigin="@Origin.BottomCenter" 
    TransformOrigin="@Origin.TopCenter" RelativeWidth="true">
    <MudSimpleTable Style="overflow-x: auto;" Dense="true">
    <thead>
        <tr>
            @foreach (var h in headings)
            {
                <th>@h</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var row in rows.Where(x=>x.Contains(_searchText??"")))
        {
            <tr>
                @foreach (var x in row.Split())
                {
                    <td>@x</td>
                }
            </tr>
        }
    </tbody>
    </MudSimpleTable>
</MudPopover>    
</div>

@code {
    private bool _isOpen;
    private string _searchText;
    public string SearchText {
        get=>_searchText;
        set {
            if (_searchText==value)
                return;
            _searchText=value;
            _isOpen=true;   
            StateHasChanged();
        }
    }

    string[] headings = { "ID", "Name", "Email", "Gender", "IP Address" };
    string[] rows = {
        @"1 Krishna kpartner0@usatoday.com Male 28.25.250.202",
        @"2 Webb wstitle1@ning.com Male 237.168.134.114",
        @"3 Nathanil nneal2@cyberchimps.com Male 92.6.0.175",
        @"4 Adara alockwood3@patch.com Female 182.174.217.152",
        @"5 Cecilius cchaplin4@shinystat.com Male 195.124.144.18",
        @"6 Cicely cemerine9@soup.io Female 138.94.191.43",
    };

    private void OnKeyDown(KeyboardEventArgs args) {
        if (args.Key=="Enter")
            _isOpen=false;
    }
}

此代码段显示了如何创建自己的过滤下拉列表。如果您使用 MudTable 而不是 SimpleTable，您可以使用行单击事件来获取选定的行，然后您实际上应该拥有完全正常工作的自定义自动完成功能。