select2 plugin edit data echo

The ajax method of the select2.js plugin is used in the project to load the data. When editing the data, it needs to be echoed. After looking for a lot of articles, it cannot be echoed normally. After Google found some clues on the official github, it was finally done.

1. js and css
2. Initialization
   Below is how I initialized in my project. The third function echoSelect2 is used to echo data.

function initSelect2(dom,url,multiple){
    var subject = $(dom);//元素
    var Select2 = subject.select2({
        ajax: {
            url: url,
            dataType: 'json',
            data: function (params) {
                return {
                    name: params.term, // 搜索参数
                };
            },
            processResults: function (data, params) {
                for (var i = 0; i < data.length; i++) {
                    data[i].id = data[i].id;
                    data[i].text = data[i].name;
                }
                return {
                    results: data
                };
            },
            cache: true
        },
        placeholder: "请输入名称搜索",
        allowClear: true,    //选中之后，可手动点击删除
        escapeMarkup: function (markup) { return markup; }, // 让template的html显示效果，否则输出代码
        minimumInputLength: 2,    //搜索框至少要输入的长度，此处设置后需输入才显示结果
        language: "zh-CN",         //中文
        multiple:multiple, //是否多选
        width: 'resolve',
        closeOnSelect:false,
        templateResult: formatSubject, // 自定义下拉选项的样式模板
        templateSelection: formatSubjectSelection     // 自定义选中选项的样式模板
    });

    return Select2;
}

function formatSubject(item) {
    if (item.loading) return item;
    var markup = '<div> <p class="text-primary">学科名称：' + item.name|| item.text + '</p>';
    //markup += '这里可以添加其他选项...';
    markup += ' </div>';
    return markup;
}

function formatSubjectSelection(item) {
    return item.name || item.text;
}
//回显数据
function echoSelect2(dom,value){
    $.each(value,function(index,value){
        $(dom).append(new Option(value.name, value.id, false, true));
    });
    $(dom).trigger("change");
}

3. Use method
var select2 = initSelect2(“#school”,”/school/searchSchoolByName”,true);
4. Echo method
Get initialization data and define it in a similar array form: var data = [{id:1001,name: "Hahaha"}];
call the method echoSelect2("#school", data); and you're done

5. Result graph