一、展现效果

模糊匹配远程搜索

二、前端代码

主要是创建select2控件，设置上传页码及格式化返回的数据。

$("#matnr").select2({
    language: "zh-CN",
    width: '80%',
    ajax: {
        url: "/materiel/selectMara1",
        dataType: 'json',
        delay: 250,

        data: function (params) {
            return {
                matnr: params.term,
                page: params.page || 1 //页码
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;

            var itemList = [];
            for (var i = 0; i < data.items.length; i++) {
                itemList.push({
                    id: data.items[i].matnr,//id列必须要有
                    text: data.items[i].matnr,//text列必须要有
                    maktx: data.items[i].maktx
                })
            }
            return {
                results: itemList,
                pagination: {
                    more: (params.page * 10) < data.total_count
                }
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) {
        return markup;
    },
    minimumInputLength: 1,
    minimumResultsForSearch: -1,
    placeholder: '请输入物料号',
    tags: true,
    maximumSelectionLength: 10,
    multiple: true,
    tokenSeparators: [',', ' '],
    templateResult: formatRepo
});

三、后端代码

1.Controller代码

    import com.alibaba.fastjson.JSONObject;
    import com.alibaba.fastjson.JSON;

    @RequestMapping("/selectMara1")
    @ResponseBody
    public String selectMara1(String matnr, Integer page) {
        String result = "";
        if (!"".equals(matnr) && matnr != null) {
            if (page == null) {
                page = 1;
            }
            List<Materiel> pageInfo = materielService.queryMatnrMaktx(matnr, page, 10);
            List<Materiel> countlist = materielService.queryMatnrMaktxCount(matnr,  10);
            int total = 0;
            for (Materiel materielc : countlist) {
                total = materielc.getMhdrz();
            }
            JSONObject object = new JSONObject();
            object.put("items", pageInfo);
            object.put("total_count", total);
            result = JSON.toJSONString(object);
        }
        return result;
    }

2.Service代码

    @Override
    public List<Materiel> queryMaterialReport(Materiel materiel, Integer pageNumber,  Integer pageSize) {
        List<String> matnrList = null;
        if (materiel.getMatnr() != null) {
            matnrList = Arrays.asList(materiel.getMatnr().split(","));
        }
        PageHelper.startPage(pageNumber, pageSize);
        List<Materiel> materielList = maraMapper.queryMaterialReport(matnrList, materiel.getWerks(), materiel.getMtart(), materiel.getMaktx(), materiel.getMatkl(), materiel.getBismt(), materiel.getMmsta(), materiel.getMtposMara(), materiel.getzT0001(), materiel.getzT0002(), materiel.getzT0003(), materiel.getzT0004(), materiel.getzT0005(), materiel.getzT0006(), materiel.getzT0007(), materiel.getzT0008(), materiel.getzT0018(), materiel.getzT0017(), materiel.getzT0021(), materiel.getzT0022(), materiel.getzT0025(), materiel.getzT0024(), materiel.getzT0023(), materiel.getzT0026(), materiel.getzT0027(), materiel.getzT0028(), materiel.getzT0031());
        return materielList;
    }