在 MudAutoComplete 组件中，当搜索结果超过 10 条时，应显示一个按钮以将更多项目添加到列表中

Question

我正在使用

MudAutoComplete

组件并使用

MoreItemsTemplate

来增加 MudAutoComplete 列表中

MaxItems

的计数。此处，点击该按钮时计数会增加，但具有更新的 ItemCount 的 UI 不会呈现。我的问题是如何在项目计数发生变化时渲染 UI？

我尝试使用

StateHasChanged();

方法来渲染 UI，但它不起作用。我希望在单击

MoreItemsTemplate

中的“添加更多项目”按钮后呈现 UI。

这是代码：

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" 
            @bind-Value="value1" 
            SearchFunc="@Search1"
            MaxItems = "@maxItems">
        <MoreItemsTemplate>
           <MudButton Color="Color.Primary" OnClick=AddItemCount>Add 10 more items </MudButton>
        </MoreItemsTemplate>
        </MudAutocomplete>
    </MudItem>
</MudGrid>

@code {
    private string value1;
    private int maxItems = 10;
    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };
 private async Task AddItemCount()
 {
     maxItems += 10;
 }
    private async Task<IEnumerable<string>> Search1(string value)
    {
        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(5);

        // if text is null or empty, show complete list
        if (string.IsNullOrEmpty(value))
            return states;
        return states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase));
    }
}

请在此处运行上述代码此处

当我单击“添加 10 个以上项目”时，AutoMudComplete 应立即在下拉列表中渲染另外 10 个项目。

Answer 1

MudAutoComplete

组件使用

Popover

菜单来显示结果列表。您遇到的问题是调用

StateHasChanged

不会刷新菜单。您也不能直接在

StateHasChanged

上调用

Popover

，因为不存在对它的引用。

但是，作为解决方法，您可以做的是切换

Popover

菜单。
通过关闭并打开菜单，将再次执行搜索并使用您更新的

MaxItems

。

将您的

AddItemCount

方法更新为

    private async Task AddItemCount()
    {
        maxItems += 10;       
    
        //refresh items list
        await autocompleteReference.ToggleMenu(); //close menu
        await autocompleteReference.ToggleMenu(); //reopen menu
        
        //scroll to last location
        await autocompleteReference.ScrollToListItem(Math.Min(maxItems - 11, states.Length - 1));
    }

您可以在此处查看完整示例。

注意：在可执行示例中，搜索方法没有真正的延迟，因此菜单切换非常即时。但是，如果您的搜索确实需要一些时间才能完成，那么当重新打开菜单时，您会注意到在列表重新出现之前填充新数据的延迟。您可以使用

ProgressIndicatorInPopoverTemplate

获得更好的用户体验。示例这里