select2

技术

发布日期: 2017-12-03

Select2 提供了一个可自定义的选择框，该框支持搜索、标记、远程数据集、无限滚动以及许多其他常用选项。

Select2 是基于 jQuery 的选择框的替代品。它支持搜索，远程数据集和结果分页。

Quick Start

引用jquery,select2

<script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
<script src="../../scripts/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="../../scripts/select2/js/i18n/zh-CN.js" type="text/javascript"></script>

定义需要绑定的select

<select id="wlxx" class="form-control" name="wlxx" style="max-width: 150px; width: 150px;"></select>

js调用

$("#wlxx").select2(&#123;
    placeholder:"",
    minimumInputLength: 1,
    maximumInputLength:100,
    allowClear:true,
    width:300,
    language: "zh-CN",
    ajax: &#123;
        url: './qrcode!searchWlxx.action',
        contentType : "application/json",
        dataType: 'json',
        type:'get',
        delay: 500,
        async:false,
        timeout : 3000, //超时时间设置，单位毫秒
        data: function (params) &#123;
            return &#123;
                queryStr:encodeURI(encodeURI(params.term).replace(/\+/g,'%2B')),
                pageIndex:params.page,
                pageSize:10
            &#125;
        &#125;,
        processResults: function (data,params) &#123;
            params.page = params.page || 1;
            var results = [];
            $.each(data.list, function (i, v) &#123;
                var o = &#123;&#125;;
                o.id = v.wlxxid;
                o.text=v.wlmc;
                o.wlxxid=v.wlxxid;
                o.wlmc = v.wlmc;
                o.wlbh=v.wlbh;
                results.push(o);
            &#125;);
            return &#123;
                results: results,
                pagination: &#123;
                    more: (params.page * 10) < data.total //每页10条数据
                &#125;
            &#125;;
        &#125;,
        cache: true
    &#125;,
    escapeMarkup: function (markup) &#123; return markup; &#125;,
    templateResult: function formatRepo(repo)&#123;
        if(!repo.id)&#123;
            return "加载中...";
        &#125;
        return '<span style="color:black;font-weight:bold;">' + repo.wlmc + '</span></br><span> 编号：' + repo.wlbh + '</span> '&#125;,
    templateSelection: function formatRepoSelection(repo, container)&#123;
        if(!repo.id)&#123;
            return "请选择商品";
        &#125;
        return repo.text
    &#125;
&#125;);

要求的JSON格式:

{
    "total":6381,
    "list":[
        {"wlxxid":"WLXX20140505092138953","wlbh":"03010109906018750201","wlmc":"12.00-20-20PR[M9088]GOODRIDE(好运)","RN":1},
        {"wlxxid":"WLXX20140731150150987","wlbh":"03010437201037100201","wlmc":"165/60R14PR[RP28]H GOODRIDE(好运)无内","RN":10}
    ]
}

Jacboo

http://www.datuzi.cn/2017/12/03/select2/