bootstrap-select-data-live-search热搜索/热加载

<select id="datasearch" data-live-search="true" liveSearchStyle="contains" autocomplete="off"
												class="selectpicker form-control" title="请输入信息模糊查询">

当下拉菜单对用户可见时，触发了shown.bs.select事件。
会发现出现一个input框↓

<div class="dropdown-menu open" style="max-height: 633px; overflow: hidden; min-height: 48px;">
<div class="bs-searchbox">
<input type="search" class="form-control" 
autocomplete="off" role="combobox" aria-label="Search" aria-controls="bs-select-1" aria-autocomplete="list">
</div>
</div>

那么当input框中触发键盘事件即可进行热加载。
问题是如何获取到这个input元素。

①下拉事件触发：

$(function () {
$("#datasearch").on('shown.bs.select',
        function (e) {
        /*method*/
        })
})

当选择框下拉事件触发时。会执行method

②寻找input元素&动态加载：

首先声明一个全局变量let sctimer=0;用于键盘抬起时的延时

 $(".bs-searchbox input[type$=search]").keyup(function () {
            $(".bs-searchbox input[type$=search]").attr('id', "datainput");
             clearTimeout(sctimer);
             sctimer = setTimeout(function () {
             $.ajax({
             url: /*你的url*/,
             type: "get",
             data: {
             /*你的数据*/
             },
             success: function (data) {
             /*根据自己需要判断是否清空*/
              $("#datasearch").empty();
              /*根据自己需要添加value和选项名*/
                                $.each(data, function (i, item) {
                                    $("#datasearch").append('<option  value="' + item + '">' + item + '</option>');
                                });
                                /*刷新使数据生效*/
                                $('#datasearch').selectpicker('refresh');
             }
             })
             }, 250);/*延时250ms*/
            })	

找到该input元素。添加id属性
并且刷新bs的选项数据

————————————————————————————

👉推荐！！！【腾讯云】爆款2核4G云服务器首年74元/年

👉推荐！！！【腾讯云】1核2G5M轻量应用服务器50元/年

【腾讯云】云数据库低至9.9/年！MySQL7.4元/月

【阿里云】ECS云服务器特惠

【阿里云】服务器首购优惠

如果文章对您有帮助，扫个红包码呗