Bootstrap Multiselect无可用选项时如何显示搜索下拉框

问题说明 #

使用bootstrap-multiselect做动态搜索加载功能时，插件默认逻辑会在选项为空时隐藏整个下拉内容区（包括搜索框），无法满足「无初始选项，用户输入关键词后异步加载数据」的交互需求。
问题复现代码：

HTML #

<select id="example-getting-started" multiple="multiple"></select>

原始JS逻辑 #

$('#example-getting-started').multiselect({
    enableFiltering: true,
    includeFilterClearBtn: true,
    enableCaseInsensitiveFiltering: true
});

// 绑定非空数据时搜索框正常展示
var data_loader = [
    { label: "Dashboard", value: 1 },
    { label: "Email", value: 2 }
];

// 绑定空数组时搜索框被自动隐藏
var data_loader_empty = [];
$('#example-getting-started').multiselect('dataprovider', data_loader_empty);

解决方法 #

插件没有提供对应开关配置，可通过自定义模板+展开回调的方式实现，不需要修改插件核心源码：

$('#example-getting-started').multiselect({
    enableFiltering: true,
    includeFilterClearBtn: true,
    enableCaseInsensitiveFiltering: true,
    // 重写模板，固定搜索栏结构，自定义空状态提示
    templates: {
        filter: '<li class="multiselect-item multiselect-filter"><div class="input-group input-group-sm"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
        empty: '<li class="multiselect-item multiselect-empty"><a href="javascript:void(0);" class="text-muted small pl-2">请输入关键词搜索加载选项</a></li>'
    },
    // 下拉展开时强制显示搜索框，自动聚焦方便输入
    onDropdownShown: function() {
        this.$filter.parents('.multiselect-filter').show();
        this.$filter.focus();
    }
});

// 测试绑定空数据源
$('#example-getting-started').multiselect('dataprovider', []);

适配动态加载场景 #

如果需要做输入关键词异步拉取数据的逻辑，直接监听搜索框输入事件即可：

// 监听搜索输入
$('#example-getting-started').next('.btn-group').on('input', '.multiselect-search', function() {
    const keyword = $(this).val().trim();
    if (!keyword) {
        $('#example-getting-started').multiselect('dataprovider', []);
        return;
    }
    // 这里替换为实际接口请求逻辑
    fetchDataFromBackend(keyword).then(res => {
        $('#example-getting-started').multiselect('dataprovider', res);
    })
});

• 该方案兼容插件原有全选、反选、清空等所有原生功能
• 空状态提示文案可根据业务需求自行修改
• 注意：不要直接修改插件压缩源码，避免后续版本升级出现兼容问题

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