select2插件的使用

 <select id="prd_tech_for_load" class="selectable" style="width:180px;">

 </select>

 

不需要分页时，直接在select内添加option列表

如果要分页的话

$(function () {
    $("#prd_tech_for_load").select2();
    var sel_tech = $("#prd_tech_for_load").select2({
        placeholder: abp.localization.values['ICT'].SelTechReq,
        ajax: {
            url: '../PDE/GetProductList',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    queryText: params.term // search term
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.result.data,
                    pagination: {
                        more: 1 < data.totalPages
                    }
                };
            },
            cache: true
        },
        //disabled: true,
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 0,
        templateResult: function (item) { // 显示查询结果
            var display = '';
            if (item.technology != null) display += item.technology;
            //if (item.customerName != null) display += '(' + item.customerName + ')';
            return display;
        },
        templateSelection: function (item) { // 显示选中的对象
            var display = '';
            if (item.technology != null) display += item.technology;
            if (item.customerName != null) display += '(' + item.customerName + ')';
            return display || item.text;
        }
    });

    sel_tech.on("select2:select", function (e) {
        defaultVue.ProductID = e.params.data.productId;
    });
});

这里要注意的一个问题是，后台返回的数据列表必须含有id这个字段，不然会出现问题，一直不能选中数据。

这个不知道的人，被坑死了！