select2api使用教程（全）

前段时间使用了Select2控件处理下拉菜单，搞了一整天才搞明白，记录下心得。参考官网https://ivaynberg.github.io/select2/#documentation

该控件我使用了两种方式：1、基本用法；2、AJAX用法。

先说第一个基本用法，该方式适用于比较小数据量时，一次把所有数据加载到template里边的<select>组件，然后由Select2对进行解析，例如：

<select id="system" name="system" style="width:100%" >  
    <option value="">请选择系统-------</option>  
        {% for sys in sys_list %}  
            <option value={{ sys.id }}>{{ sys.name }}</option>  
        {% endfor %}  
</select>          
  
<script>  
　　$(document).ready(function () {  
　　　　$("#system").select2();  
　　});  
</script>

我使用了Django框架，数据以列表形式返回给前台，控件效果：

接下来是AJAX用法，可以分成两部分：后台数据源；前台设置。先说后台数据源部分，参考代码：

def ajax(request):  
    """  
    AJAX数据源视图-系统模块  
    """  
    start = int(request.GET.get('iDisplayStart', '0'))  
    length = int(request.GET.get('iDisplayLength', '30'))  
    search = request.GET.get('sSearch', '')  #取得前台控件输入的关键字  
    if search:　　　　#截取查询结果对象，以start开始截取start+length位  
        orgs = Info.objects.filter(  
            Q(name__icontains=search) & Q(deleted=False)  
        )[start:start + length]  
    else:  
        orgs = Info.objects.all()[start:start + length]     
    val_list = []  
    for org in orgs:  
        val_list.append({'id': org.id, 'name': org.name})   
　　"""  
　　根据关键字查询得到结果后开始拼装返回到前台的数据。先生成字典型数组，一般SELECT2组件使用的话生成id、name两个字段即可  
　　"""  
  
    json_data = json.dumps(val_list)  
    return HttpResponse(json_data, 'application/json')

前台设置部分代码：

<script>  
            //机构自动搜索  
        function resultFormatResult(orgs) {       {# 下拉选项名称      #}  
            return '<p>' + orgs.name + '</p>';  
        }  
  
        function resultFormatSelection(orgs) {    {# 选取后显示的名称     #}  
            return orgs.name;  
        }  
        $(document).ready(function () {  
            $("#company").select2({  
                placeholder: "点击查询机构",  
                minimumInputLength: 2,　　{# 最小查询参数    #}  
                multiple: flase,  　　　　　　{# 多选设置    #}  
                ajax: {  
                    url: '/admin/organizations/ajax/',  {# ajax后台函数路径 #}  
                    dataType: "json",　　　{# 传输的数据类型，一般使用json或jsonp，jsonp比较复杂，需要APIKEY，暂时没进行研究 #}  
                    type: "GET",　　　　　　{# GET即为前台JS向后台函数取数据，POST反之 #}  
                    quietMillis: 1000, 　　{# 延时查询毫秒数 #}  
                    data: function (term, page) {  
                        return {  
　　　　　　　　　　　　　　　　　　　sSearch: term, {# term为前台输入的查询关键字，保存到sSearch对象，即后台保存关键字的对象 #}  
　　　　　　　　　　　　　　　　　　　page: 10   {# 每次查询的结果数 #}  
  
                        };  
                    },  
                    results: function (data, page) {  
                        return {  
                            results: data  {# results结果集，data为后台返回的查询结果 #}  
                        };  
                    }  
                },  
                formatSelection: resultFormatSelection,  // 设定查询样式  
                formatResult: resultFormatResult,　　　　// 设定查询结果样式  
                dropdownCssClass: "bigdrop", 　　　　// 设定SELECT2下拉框样式，bigdrop样式并不在CSS里定义，暂时没深入研究  
                escapeMarkup: function (m) {  
                    return m;  
                },  
　　　　　 　　　 initSelection: function (element, callback) {  {# 默认显示option项 #}  
                    var compName = document.getElementById("companyName").value;var data = {name:compName};  
                    callback(data);　　  
            });  
        });  
    </script>

<p class="form-group {% if form.company.errors %} has-error{% endif %}">  
            <label class="col-sm-4 control-label">所属机构</label>  
            <p class="col-sm-6"><input id="company" name="company" type='hidden' style="width:100%" class="populate placeholder"  
                       value="{{ modify_company.id }}" required="True" />  
                <input id="companyName" hidden="hidden" value="{{ modify_company.name }}" />  
            </p>  
</p>

生成的效果图

大概的说明看代码注释，initSelection这个参数要重点说下，当时纠结了好久。

我使用了一个隐藏的<input id="companyName" />存放companyName,然后initSelection可以取其值来callback,然后可见的<input id="company" />供Select2解析。