若依框架使用 bootstrap-select 动态从后台加载下拉选项

想要的效果： 

 一个搜索框

搜索框实时加载后台数据

选中

 

HTML代码：

<div class="box-tools pull-left">
    <div class="btn-group">
        <div class="col-sm-10" id="selectItem">
            <select id="itemSelect" name="itemSelect" onchange="selectedItem()" class="selectpicker" title="全部" data-live-search="true">
                <!--<option value="y" selected>猴子偷桃</option>-->
                <!--<option value="m">八戒吃喝</option>-->
            </select>
        </div>
    </div>
</div>

 

 

JS代码:

<script type="text/javascript">
    var itemDataUrl = "http://....../returnJsonData";//选项返回键值对集合 json封装

    //绑定bootstrap-select事件
    $('#itemSelect').on('shown.bs.select',function(e){
        //console.error("当前元素："+$('#itemSelect').html());
        //console.error("父节点："+$('#itemSelect').parent().html());
        //console.error("父节点下找到搜索文本框所在div："+$('#itemSelect').parent().find(".bs-searchbox").html());
        //console.error("根据类名锁定文本框："+$('#itemSelect').parent().find(".bs-searchbox").find("input"));
        $('#itemSelect').parent().find(".bs-searchbox").find("input").attr('id',"searchParam");//为input增加id属性
        //为input绑定键盘离开事件，触发搜索
        $('#searchParam').keyup(function(){
            var searchParam = $('#searchParam').val().trim();
            var data = {
                'searchParam':searchParam,"shopId":""
            }
            itemData($('#itemSelect'),data);
        })
    });

    //商品
    function itemData($obj,data) {
        var html = '';
        $.post(itemDataUrl, data, function (res) {
            if (res.code == 200) {
                jQuery.each(res.result, function(i, val) {
                    html += '<option value="' + val.mapKey + '" >' + val.mapValue+ '</option>';
                });
                $obj.html(html);
                //必须加，刷新select
                $obj.selectpicker('refresh');
            } else {
                layer.msg(res.msg, {time: 2000});
            }
        }, 'json');
    }

</script>

 

这里的js动态加载数据方式参考
https://blog.csdn.net/m0_37355951/article/details/78287278#commentsedit

https://blog.csdn.net/m0_37355951/article/details/78292910

https://blog.csdn.net/w309827333/article/details/82424944

https://blog.csdn.net/wg526125649/article/details/84622527

参考的文章里，一些代码不适用我的项目，所以适当修改下，大概思路是一样的，确定当前select所在节点，找到相邻的bootstrap生成的输入框所在节点，给输入框id赋值，实时监控输入框文本，或者用一个搜索按钮，获取后台数据。

 

 

浏览器审查元素，查看文本框所在节点，发现在select隔壁的隔壁的下边，那么js里可以使用jquery的方式找到它，给它设置id，便于后边监听它，并根据输入内容动态加载选项

$('#itemSelect').parent().find(".bs-searchbox").find("input")

这里是打印日志：

 

后台返回的json数据：