当前位置 : 主页 > 网页制作 > Bootstarp >

bootstrap框架下的selectpicker搜索实现根据搜索内容去后台实时查询

来源:互联网 收集:自由互联 发布时间:2021-06-12
想要实现下拉框的搜索功能,输入搜索项后去后台查询,然后将查询的列表返回到下拉框中,不再是以往那种先获取所有可选项,然后前端根据输入的搜索内容显示可选项 // 下拉搜索框

想要实现下拉框的搜索功能,输入搜索项后去后台查询,然后将查询的列表返回到下拉框中,不再是以往那种先获取所有可选项,然后前端根据输入的搜索内容显示可选项

 

// 下拉搜索框<select name="gid" id="gid" class="selectpicker form-control" data-live-search="true"> <option value="">请选择公司</option></select>//下面是js<script> $("#gid").on(‘shown.bs.select‘,function(e){ //获取下拉select里的输入框,提示一下搜索下拉 $(this).prev().find("input").attr(‘placeholder‘,"请输入公司名称搜索"); //绑定一下键盘输入 $(this).prev().find("input").keyup(function(){ //为select里的输入框绑定id,方便获取 $(this).prev().find("input").attr(‘id‘,"dangname"); var dangname = $(this).val(); var datas = { ‘gname‘:dangname }; setTimeout(function () {//延时2秒 guestlist(‘#gid‘,datas); },2000); }) }); function guestlist(obj,datas){ $(obj).empty(); $.ajax({ type: "post", url:‘‘,//查询url data:datas, async:false, dataType: "json", success: function(data){ if (data !=‘‘) { var html = ‘‘; $.each(data,function (index,ele) { html += ‘<option value="‘ + ele.id + ‘">‘ + ele.unitname+ ‘</option>‘; }); $(obj).html(html); }else { $(obj).html(‘<option value="">请选择客户</option>‘); } //刷新select $(obj).selectpicker(‘refresh‘); } }); }</script>--------------------- 作者:旮不旮旯不旯 来源:CSDN 原文:https://blog.csdn.net/wg526125649/article/details/84622527 版权声明:本文为博主原创文章,转载请附上博文链接!

网友评论