想要的效果:
一个搜索框
搜索框实时加载后台数据
选中
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数据: