如何获取Bootstrap-select Picker的用户输入文本以用于API调用？

我明白你的困扰——Bootstrap-select的live search输入框是动态生成的，和原始<select>元素是分离的，所以直接拿select的value或者文本肯定拿不到用户输入的搜索内容。而且你之前用的change事件只有在用户选择下拉选项时才会触发，完全不是你需要的输入时机。

下面是具体的解决方案：

核心思路 #

1. 找到Bootstrap-select动态生成的搜索输入框（它在bootstrap-select容器下的bs-searchbox里）
2. 监听这个输入框的input事件（实时捕获用户输入）
3. 加入防抖逻辑避免频繁调用API
4. 拿到搜索文本后调用API，更新选项后刷新selectpicker

修改后的完整代码 #

$(document).ready(function () {
    // 初始化selectpicker
    $('.selectpicker').selectpicker({
        liveSearch: true,
        showSubtext: true
    });

    // 定位到live search的输入框，监听输入事件
    $('#medicineText')
        .next('.bootstrap-select') // 找到selectpicker生成的容器
        .find('.bs-searchbox input') // 找到搜索输入框
        .on('input', function() {
            const searchText = $(this).val().trim();
            
            // 防抖：300ms内没有新输入才触发API调用
            clearTimeout(window.medicineSearchTimer);
            window.medicineSearchTimer = setTimeout(function() {
                // 可以设置最小输入长度，避免空文本或短文本调用API
                if (searchText.length >= 2) {
                    GetMedicineAccordingToText(searchText);
                } else {
                    // 输入过短时清空选项（或恢复初始状态）
                    $('#medicineText').empty().selectpicker('refresh');
                }
            }, 300);
        });
});

function GetMedicineAccordingToText(searchText) {
    $.ajax({
        url: '/NonPOYCPatient/GetMedicineAccordingToText',
        type: "POST",
        data: { medicineText: searchText },
        dataType: 'json'
    }).done(function (response) {
        // 清空原有选项
        $('#medicineText').empty();
        
        // 渲染新选项
        if (response && response.length > 0) {
            $.each(response, function(index, medicine) {
                $('#medicineText').append(`<option value="${medicine.Value}">${medicine.Text}</option>`);
            });
        }
        
        // 必须调用refresh让selectpicker更新UI
        $('#medicineText').selectpicker('refresh');
    }).fail(function (xhr, status, error) {
        console.error('加载药品列表失败:', error);
    });
}

关键细节说明 #

• 为什么原来的方法无效？：原始<select>的value只有在用户选择选项时才会更新，而live search的输入文本是存放在动态生成的input里，和select本身无关。
• 防抖的作用：避免用户每输入一个字符就触发一次API请求，减少服务器压力，同时提升体验。
• refresh方法：Bootstrap-select不会自动感知选项变化，必须调用selectpicker('refresh')才能重新渲染下拉列表。

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