如何在Blazor中无需JS修改TelerikMultiSelect内input的autocomplete属性

首选方案：使用InputHtmlAttributes参数 #

Telerik Blazor的MultiSelect组件内置了InputHtmlAttributes参数，可直接为内部生成的input元素添加或修改属性，完全无需JavaScript。

代码示例 #

<TelerikMultiSelect Data="@SelectOptions"
                    @bind-Value="@SelectedItems"
                    InputHtmlAttributes="@new Dictionary<string, object> { { "autocomplete", "disabled" } }">
</TelerikMultiSelect>

@code {
    private List<string> SelectOptions = new List<string> { "Apple", "Banana", "Cherry", "Date" };
    private IEnumerable<string> SelectedItems { get; set; } = new List<string>();
}

说明 #

• InputHtmlAttributes接收Dictionary<string, object>类型参数，键为HTML属性名，值为属性值
• 设置autocomplete="disabled"后，Chrome会遵守该规则，不再弹出地址类自动补全建议
• 该参数不会破坏组件原有功能（筛选、多选、样式等），完全保留原生组件行为

备选方案：自定义InputTemplate #

若需深度定制input元素（如添加额外事件或自定义样式），可使用组件的InputTemplate模板替换默认input：

代码示例 #

<TelerikMultiSelect Data="@SelectOptions"
                    @bind-Value="@SelectedItems">
    <InputTemplate>
        <input type="text"
               class="k-input k-input-solid k-input-md k-rounded-md"
               autocomplete="disabled"
               @bind-value="@context.FilterText" />
    </InputTemplate>
</TelerikMultiSelect>

@code {
    private List<string> SelectOptions = new List<string> { "Apple", "Banana", "Cherry", "Date" };
    private IEnumerable<string> SelectedItems { get; set; } = new List<string>();
}

注意事项 #

• 必须绑定@bind-value="@context.FilterText"，否则组件的实时筛选功能会失效
• 复制Telerik默认的input CSS类（如k-input系列），确保自定义input与组件整体样式一致
• 可通过浏览器开发者工具查看原input的完整类名，保证样式完全匹配

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