zoukankan      html  css  js  c++  java
  • bootstrap框架下的selectpicker搜索实现根据搜索内容去后台实时查询

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

    // 下拉搜索框
    <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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    一个ball例程带你进入 Halcon 世界
    新公民读本
    open_window()到底做了什么?
    duilib学习领悟(4)
    duilib学习领悟(3)
    duilib学习领悟(2)
    通过Vue路由传参的两种方式及Vue组件中接收参数的方式
    彻底研透javascript中的对象及面向对象编程
    thinkphp5中使用phpmailer实现发送邮件功能
    小程序和ThinkPHP5结合实现登录状态(含代码)
  • 原文地址:https://www.cnblogs.com/hardwork1/p/bootstrap-selectpicker.html
Copyright © 2011-2022 走看看