select2的使用

以前主要写后端，前端接触的比较少，记录一下，方便下次使用。

输入‘北京’ 会自动调用后端接口查询 相关内容

前端代码：

<div class="row">
                <div class="form-group">
                    <div class="col-md-8">
                        <label class="col-sm-4 control-label"><span class="text-danger">*</span>中心机构</label>
                        <div class="col-sm-2">
                            <select id="organTypeId" name="organType" onchange="changeOrgan(this)" class="form-control">
                                <option value="0">选择机构</option>
                                <option value="1">医院</option>
                                <option value="2">专家组</option>
                            </select>
                        </div>

                        <div class="col-sm-6">
                            <select class="form-control g-select2" id="OrganSearchId" message="至少输入1个关键字"
                                  name="searchOrganName" data-rule-required="true">

                            </select>
                        </div>
                    </div>
                </div>
            </div>
//选中下拉框的值，把对应的值text 赋值给当前隐藏域
<div id="organHideId" class="row" style="display: none">
                <div class="form-group">
                    <div class="col-md-8">
                        <label class="col-sm-4 control-label" id="changeNameId"><span  class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input id="organNameId" class="form-control" type="text" name="organName" disabled>
                        </div>
                    </div>
                </div>
            </div>

            //选中下拉框的值，把对应的值id 赋值给当前隐藏域
            <input type="hidden" name="hrsOrganId" id="hrsOrganId" />

对应的js代码：

 $("#OrganSearchId").select2({
            language: "zh-CN",
            multiple: true,
            minimumInputLength: 1,
            ajax: {
                url: "/medicalunion/organSearch",
                dataType: "json",
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term,
                        organType:$("#organTypeId").val()
                    };
                },
                processResults: function (res, params) {
                    var list = [];
                    res.forEach(function (item) {
                        list.push({
                            id: item.hrsOrganId,
                            text: item.organName +"("+ item.hospName+"\t"+item.deptName+")"
                        });
                    });
                    return {
                        results: list
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            templateResult: function (repo) {
                if (repo.loading) return repo.text;
                return $('<option>', repo);
            },
            templateSelection: function (repo) {
                console.log(repo.text)

                $("#hrsOrganId").val(repo.id);
                chooseOrgan(repo.text);

                $("#OrganSearchId").html('');
                return repo.text;
            }
        });
    })

重点解析：
查询参数的设置 + 接口返回的json字符串(List) 的处理

模板数据 + 选中查询数据关联的级联操作js

后端springmvc 查询服务代码：

@RequestMapping(value = "organSearch",method = RequestMethod.GET)
    @ResponseBody
    public String organSearch(String organType, String q) {

        List<OrganNameVO> resultList = new ArrayList<>();
            if (organType.equals(ORGANIZATION_TYPE_HOSP.toString())) {
                HospitalSearchParam param = new HospitalSearchParam();
                param.setQ(q);
                <HospitalSearchResultDTO> list = searchManager.hospitalSearch(param);
                HospitalSearchResultDTO listData = list.getData();
                if (listData == null || CollectionUtils.isEmpty(listData.getHospital())) {
                    return JsonUtils.writeValueAsString(resultList);
                }
                List<HospitalSearchResultDocsDTO> resultDocsDTOList = listData.getHospital();

                List<OrganNameVO> voList = transformHospital(resultDocsDTOList);

                return JsonUtils.writeValueAsString(voList);
            } else if (organType.equals(ORGANIZATION_TYPE_EPGROUP.toString())) {
                ExpertGroupSearchParam param = new ExpertGroupSearchParam();
                param.setQ(q);
                Response<ExpertGroupSearchResultDTO> list = searchManager.expertGroupSearch(param);

                List<OrganNameVO> voList = transform(list.getData().getDocs());

                return JsonUtils.writeValueAsString(voList);

            } else {

                return JsonUtils.writeValueAsString(resultList);
            }

    }