如何从Telerik Autocomplete获取选中对象而非绑定值？

我现在在用非常规方式使用Telerik Autocomplete，遇到了一个问题。我的绑定值是Autocomplete输入框中的用户输入内容（searchTerm），这样每次按键都能以该输入为参数调用第三方API，这个逻辑在OnAddressSearch里实现，目前运行正常。下拉框绑定的是AddressDisplays对象数组，其中Text字段是地址的显示文本，当前把每个AddressDisplays的Value设为了searchTerm。

问题：当用户从下拉框选中项时，OnChange事件只会传递当前的搜索词，但我需要获取实际选中的AddressDisplays完整对象来做后续处理。如果把AddressDisplays的Value改成地址ID之类的唯一标识，输入框就会显示用户看不懂的内容，不符合需求。

相关代码 #

<TelerikAutoComplete Data="@AddressSuggestions" Size="sm"
                 ValueChanged="@(async value => await OnAddressSearch(value, CancellationToken.None))"
                 ValueExpression="@(() => SearchAddressTerm)"
                 OnChange="@AddressSelectedHandler" Placeholder="Start typing address"
                 ClearButton="true" Filterable="false">
</TelerikAutoComplete>

@code{
    public string SearchAddressTerm { get; set; } = string.Empty;

    public AddressDisplays[] AddressSuggestions { get; set; } = Array.Empty<AddressDisplays>();
    public record AddressDisplays(string Value, string Text, string Type, int Count, string Id);

    private async Task OnAddressSearch(string searchTerm, CancellationToken cancellationToken) 
    {
        SearchAddressTerm = searchTerm; 

        // API call using the user-typed searchTerm
        // retrieve address data 
        // create AddressDisplays object for each retrieved address - Value = searchTerm, Text = a display text for each address 
        // this way the AddressSuggestions[] is built up  
    }

    private async Task AddressSelectedHandler(object selectedAddressSearchTerm) 
    {
        // I need the obtain the actual selected AddressDisplays object, so I can continue processing of the selected address
    }
}

解决方案：使用SelectedItemChanged事件获取完整对象 #

Telerik Blazor Autocomplete提供了SelectedItemChanged事件，这个事件的参数会直接返回选中的数据源对象（也就是你的AddressDisplays实例），完美匹配你的需求。同时你可以继续保留Value绑定到SearchAddressTerm，确保输入框显示用户输入的内容。

修改后的代码如下：

<TelerikAutoComplete Data="@AddressSuggestions" Size="sm"
                 ValueChanged="@(async value => await OnAddressSearch(value, CancellationToken.None))"
                 ValueExpression="@(() => SearchAddressTerm)"
                 SelectedItemChanged="@AddressSelectedHandler"
                 Placeholder="Start typing address"
                 ClearButton="true" Filterable="false">
</TelerikAutoComplete>

@code{
    public string SearchAddressTerm { get; set; } = string.Empty;

    public AddressDisplays[] AddressSuggestions { get; set; } = Array.Empty<AddressDisplays>();
    public record AddressDisplays(string Value, string Text, string Type, int Count, string Id);

    private async Task OnAddressSearch(string searchTerm, CancellationToken cancellationToken) 
    {
        SearchAddressTerm = searchTerm; 

        // API call using the user-typed searchTerm
        // retrieve address data 
        // create AddressDisplays object for each retrieved address - Value可保持searchTerm，也可改为Id，不影响输入框显示
        // this way the AddressSuggestions[] is built up  
    }

    private async Task AddressSelectedHandler(AddressDisplays selectedAddress) 
    {
        if (selectedAddress != null)
        {
            // 直接拿到选中的完整对象，执行后续逻辑
            var selectedId = selectedAddress.Id;
            var selectedAddressText = selectedAddress.Text;
            // ...你的业务处理代码
        }
    }
}

补充说明 #

• SelectedItemChanged仅在用户从下拉列表选中项时触发，参数就是对应的AddressDisplays实例，完全满足获取完整对象的需求
• 输入框的Value依然绑定SearchAddressTerm，所以输入框会继续显示用户输入的内容，不会出现ID之类的无关文本
• 若需要区分用户是手动输入还是选中下拉项，可以同时保留OnChange和SelectedItemChanged事件，但多数场景下单独使用SelectedItemChanged即可

内容的提问来源于stack exchange，提问作者ISquared