如何通过Ajax填充BsMultiSelect并实现分页、查询等功能？

BsMultiSelect本身没有内置Ajax支持，但可以手动结合Ajax请求实现类似Select2的功能，包括分页、关键词查询和结果限制。以下是具体实现思路和代码示例：

1. 基础准备 #

先初始化一个空的BsMultiSelect控件：

<select id="multiSelect" multiple></select>

$('#multiSelect').BsMultiSelect();

2. 绑定搜索输入事件 #

BsMultiSelect的搜索框是动态生成的，监听其输入事件触发Ajax请求：

// 监听搜索框输入
$(document).on('input', '#multiSelect_filter', function() {
    const searchTerm = $(this).val().trim();
    const currentPage = 1; // 初始页码，后续可根据分页逻辑调整
    const pageSize = 10; // 每页结果数量

    // 发起Ajax请求
    $.ajax({
        url: '/api/data',
        method: 'GET',
        data: {
            search: searchTerm,
            page: currentPage,
            pageSize: pageSize
        },
        success: function(response) {
            // 清空原有选项
            $('#multiSelect').empty();
            
            // 填充新选项
            response.data.forEach(item => {
                $('#multiSelect').append(`<option value="${item.id}">${item.name}</option>`);
            });
            
            // 重新渲染BsMultiSelect
            $('#multiSelect').BsMultiSelect('refresh');
        },
        error: function() {
            alert('加载数据失败');
        }
    });
});

3. 实现分页逻辑 #

添加分页按钮，点击时更新页码并重新发起请求：

// 示例：下一页按钮点击事件
let currentPage = 1;
$('#nextPageBtn').click(function() {
    currentPage++;
    const searchTerm = $('#multiSelect_filter').val().trim();
    // 复用上述Ajax请求逻辑，传入更新后的currentPage参数
});

4. 关键注意事项 #

• 每次Ajax请求成功后，必须调用BsMultiSelect('refresh')刷新控件，否则新选项不会显示。
• 可根据后端返回的总数据量动态生成分页按钮，完善分页功能。
• 建议给搜索输入添加防抖（如延迟300ms发起请求），避免频繁调用接口。

内容的提问来源于stack exchange，提问作者pavel.strouhal