Razor视图中Html.DropDownList的Bootstrap Select data-live-search功能无法生效，如何修复？

你的问题核心出在**@Html.DropDownList的htmlAttributes参数写法错误**——你把所有属性都混在了class的字符串里，Razor无法正确解析这些data属性，导致bootstrap-select的搜索功能无法被识别触发。

错误写法的问题点 #

你原来的代码里，htmlAttributes是这样定义的：

new { @class = "data-live-search=true data-live-search-style=startsWith class=selectpicker" }

这相当于把所有内容都当成了class属性的取值，而不是分别定义data-live-search、data-live-search-style和class这三个独立的HTML属性，bootstrap-select自然无法读取到搜索相关的配置。

正确的代码写法 #

你需要把每个属性单独作为匿名对象的键值对来定义，Razor会自动处理属性名的格式转换：

@Html.DropDownList("ID", 
    Model.TrainList.Select(obj => new SelectListItem() { 
        Text = obj.trainDescription, 
        Value = obj.ID.ToString() 
    }), 
    "select", 
    new { 
        @class = "selectpicker", 
        data_live_search = "true", 
        data_live_search_style = "startsWith" 
    })

如果你习惯直接使用HTML原生的短横线属性名，也可以用带@前缀的字符串键写法：

@Html.DropDownList("ID", 
    Model.TrainList.Select(obj => new SelectListItem() { 
        Text = obj.trainDescription, 
        Value = obj.ID.ToString() 
    }), 
    "select", 
    new { 
        @class = "selectpicker", 
        @data-live-search = "true", 
        @data-live-search-style = "startsWith" 
    })

额外注意事项 #

1. 确保页面引入的资源顺序正确：
   • 先加载jQuery
   • 再加载Bootstrap的JS文件
   • 最后加载bootstrap-select的JS文件
2. 如果下拉列表是页面加载后动态生成的，需要手动调用$('.selectpicker').selectpicker('refresh')来重新初始化组件。

这样修改后，bootstrap-select的实时搜索功能应该就能正常工作了！

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