Jquery中使用select2插件实现ajax实时请求数据

不念不忘少年蓝@ 2023-10-18 20:29 38阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190626095745808.gif][]

### select2相关 ###

select2官网：

[https://select2.org/][https_select2.org]

## 实现 ##

### 引入select2 ###

页面中需要引入select.full.min.js和select2.min.css以及jauery。

相关资源下载：

[https://download.csdn.net/download/badao\_liumang\_qizhi/11258768][https_download.csdn.net_download_badao_liumang_qizhi_11258768]

引入方式具体要根据自己使用的模板或相关技术，如果使用html就是最简单的引入js文件和css文件的方式。

这里使用的是Thymeleaf模板的方式引入。

### Html代码 ###

select部分的代码：

注意其class属性和id以及name属性。

此select在模态框中，完整模态框代码：

<div class="modal inmodal" id="apAddAndEidtModel" role="dialog" aria-hidden="true">
            <div class="modal-dialog" id="apAddAndEidtDiv" th:fragment="apAddAndEidtDiv">
                <div class="modal-content animated fadeIn">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <i class="fa fa-plus-circle modal-icon pl-1p75"></i>
                        <h4 class="modal-title" th:text="${dlgTitle}">添加质检单明细信息</h4>
                        <small><span th:text="${dlgSubtitle}">您可以在此窗口中添加质检单明细信息</span></small>
                    </div>
                    <form id="apAddOrEidtForm" role="form">
                        <div class="modal-body">
                            <div class="form-row">
                                <input type="hidden" class="form-control" name="id" id="id"/>
                                <input type="hidden" class="form-control" name="op" th:value="${op}"/>
                                <input type="hidden" id="serial">
                                <input type="hidden" id="ifEdit">
                                <div class="form-group col-md-6">
                                    <div class="form-group " id="fromgroup">
                                        <label class="font-normal">物料编码</label>
                                            <select class="select2_material form-control" data-placeholder="请选择一种物料"
                                                              id="materielNumber" name="materielNumber" >
                                    </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label>物料名称</label>
                                    <input type="text" readonly class="form-control" name="materielName"/>
                                    <input type="hidden" readonly class="form-control" name="materielCode"/>
                                </div>
                                <div class="form-group col-md-6">
                                    <label>数量</label>
                                    <input type="number" placeholder="请输入数量" class="form-control" name="num" id="num"
                                    />
                                </div>
    
                                <div class="form-group col-md-6">
                                    <label>供应商批次号</label>
                                    <input type="text" placeholder="请输入供应商批次号" class="form-control" name="batch" id="batch"
                                    />
                                </div>
    
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

### Jquery部分代码 ###

需要在页面加载完成后就初始化select元素，所以代码写在：

$(document).ready(function (){});

中。

代码：

$(document).ready(function (){
    
     var select2 = function () {
          
                $(".select2_material").select2({
                    dropdownParent: $('.modal-content'),
                    placeholder: "物料编码/物料名称",
                    allowClear: true,
                    ajax: {
                        url: '/busMaterielManage/searchMaterielSelectData',
                        dataType: 'json',
                        data: function (params) {
                            var query = {
                                param: params.term //params.term 搜索参数值
                            }
                            return query;
                        },
                        processResults: function (data) {
                            //返回最终数据data 给dataArray
                            var dataArray = [];
                            for (var i = 0; i < data.length; i++) {
                                var dataObj = {};
                                dataObj.id = data[i].materielNumber;
                                dataObj.text = data[i].materielNumber + " / " + data[i].materielName;
                                dataArray.push(dataObj);
                            }
                            return {
                                results: dataArray
                            };
                        },
                        error: function (error) {
                        }
                    }
                });
        }
        select2();
    });

注：

1.dropdownParent: $('.modal-content')是声明其父级元素，避免select的下拉框被modal框遮盖。

2. data: function (params) \{  
var query = \{  
param: params.term //params.term 搜索参数值  
\}  
return query;  
\},  
就是获取select框中所输入的值。

3. url: '/busMaterielManage/searchMaterielSelectData',  
通过url请求后台获取数据。

4.processResults:是请求数据成功之后的回调方法吗，将返回的数据封装并最终赋值给results即可。

5.最后调用上面声明的函数自身。

### 后台逻辑代码 ###

后台使用SpringBoot+MyBatisPlus查询数据，大体思路就是根据传递的参数，模糊搜索数据返回一个list。

Controller层：

@Description("获取物料管理编辑页面")
      @ResponseBody
      @RequestMapping("/searchMaterielSelectData")
      public List<BusMaterielInfo> searchMaterielSelectData(String param){
        return busMaterielInfoService.searchMaterielSelectData(param);
      }

Service层：

List<BusMaterielInfo> searchMaterielSelectData(String param);

ServiceImpl层：

@Override
      public List<BusMaterielInfo> searchMaterielSelectData(String param) {
        List<BusMaterielInfo> materielInfoList=null;
        try{
          materielInfoList=new ArrayList<>();
          if(StringUtils.isBlank(param)){
            return materielInfoList;
          }
          QueryWrapper<BusMaterielInfo> queryWrapper = new QueryWrapper<>();
          queryWrapper.eq("deleted_flag",0);
          if(StringUtils.isNotBlank(param)) {
            queryWrapper.and(wrapper -> wrapper.like("materiel_number", param).or().like("materiel_name", param));
          }
          materielInfoList=busMaterielInfoMapper.selectList(queryWrapper);
        }catch (Exception ex){
          Log.getInst(this).error(ex.getMessage());
        }
        return materielInfoList;
      }

### 上面效果中的选择之后的联动实现 ###

$("#materielNumber").on("change", function (e) {
                            var materielCode = $("#materielNumber").val();
                            if (materielCode) {
                                $.post({
                                    url: "/busMateriel/getOneByCode",
                                    data: {code: materielCode}
                                }).done(function (res) {
                                    if (res) {
                                        $("input[name='materielName']").val(res.materielName);
                                        $("input[name='materielCode']").val(res.materielNumber);
    
                                    }
                                })
                            }
                        })

获取上面select的值并传递到后台请求数据后返回给前台进行赋值。

[Image 1]: 
[20190626095745808.gif]: https://img-blog.csdnimg.cn/20190626095745808.gif
[https_select2.org]: https://select2.org/
[https_download.csdn.net_download_badao_liumang_qizhi_11258768]: https://download.csdn.net/download/badao_liumang_qizhi/11258768