select2的使用总结

select2插件的使用总结

<link rel="stylesheet" href="resources/libs/select2/css/select2.min.css">
<script src="/resources/libs/select2/js/select2.full.min.js"></script>
<link rel="stylesheet" href="resources/css/bootstrap-select.css">
<script src="/resources/js/bootstrap-select.js"></script>

<select class="form-control" name="superior"></select>

 $("select[name='superior']").select2({
    placeholder: (function() {  //**自定义提示文字
        if (!userMes.superior) { return "请输入上级用户名称！" } else { return userMes.superior.name }
    })(),
    minimumInputLength: 2,
    closeOnSelect: true,
    width: 200,
    language: "zh-CN",
    allowClear: true,
    ajax: {
        url: "",
        dataType: "json",
        type: "POST",
        data: function(params) {
            //  console.log(params);
            return {
                q: params.term, // search term
                page_limit: 10
            };
        },
        delay: 1000,
        processResults: function(data, params) {
            //返回的选项必须处理成以下格式
            var results = data;
           //  console.log(results);
            return {
                results: $.map(results.data, function(i) { return { id: i.id, text: i.name } }) //***必须赋值给results并且必须返回一个obj，建议参考最新官网
            };
        }
    },
    escapeMarkup: function(m) {
        return m;
    }
});
 //选择完数据后赋值给实体usermes
$("select[name='superior']").on("select2:select", function(e) {
    var data = e.params.data;
   //  console.log(data)
    userMes.superior = {
        id: data.id,
        name: data.text
    };
});