使用select2实现本地或者ajax动态查询

效果：

 1、插件引用

2、2、html代码

物料名称
	
		
			--请选择--
		
	

3、js代码
    1>本地

	 $(document).ready(function () {
        //ajax调用时开启
        toLoadmaterial()  
        //本地示例
        var data =[
            {"id":1,"text":"菠菜"},
            {"id":2,"text":"鸡蛋"},
            {"id":3,"text":"猪肉"}]
        $("#material_name").select2({
            data: data,
            placeholder: '请选择',//默认文字提示
            language: "zh-CN",//汉化
            allowClear: true//允许清空
        });
  
    })

    2>ajax

 function toLoadmaterial() {
            var enterprise_id = $("#enterprise_id").val()  ;
            $("#material_name").select2({
                ajax: {
                    url : 'billQuery.do?method=toMaterialSelect',
                    headers: {
                        'Accept': 'application/x-www-form-urlencoded;charset=UTF-8',
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    async: true,
                    contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                    dataType : 'json',
                    type : 'post',
                    data : function (params) {
                        return {
                            enterprise_id : enterprise_id,
                            perName : params.term    //接收搜索框输入的姓名
                        };
                    },
                    processResults: function (data) {        //data返回数据
                        var options = new Array();
                        console.log(data);
                        if (data.status == "success") {
                            $(data.data).each(function(i, o) {
                                options.push({　　　　　　　　　　//获取select2个必要的字段，id与text
                                    id : o.id,
                                    text : o.text
                                });
                            });
                            return {
                                results: options        //返回数据
                            };
                        }else{
                            alert(data.msg);
                        }
                    },
                    cache: true
                },
                placeholder: "输入名称或编码搜索...",
                allowClear: true,    //选中之后，可手动点击删除
                escapeMarkup: function (markup) { return markup; }, // 字符转义处理自定义格式化防止xss注入
                formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
                formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
            });
    }

4、ajax接口代码

    @RequestMapping(params = "method=toMaterialSelect")
	@ResponseBody
	public String toFoodSelect(HttpServletRequest request,
							   @RequestParam Map params) {
		try {
			List> list = new ArrayList<>();
			System.out.println(params.get("enterprise_id").toString());
			String perName ="b";
			if(params.get("perName")!=null){
				perName = params.get("perName").toString();
			}
			System.out.println(perName);
			if(perName.equals("a")){
				Map map1 = new HashMap<>();
				map1.put("id",1);
				map1.put("text","菠菜");
				Map map2 = new HashMap<>();
				map2.put("id",2);
				map2.put("text","鸡蛋");
				list.add(map1);
				list.add(map2);
			}else{
				Map map1 = new HashMap<>();
				map1.put("id",1);
				map1.put("text","菠菜");
				Map map2 = new HashMap<>();
				map2.put("id",2);
				map2.put("text","猪肉");
				list.add(map1);
				list.add(map2);
			}
			return WDMessage.success(Constant.QUERY_SUCCESS,list);
		} catch (Exception ex) {
			ex.printStackTrace();
			return WDMessage.error(Constant.QUERY_FAILURE);
		}
	}

5、数据回显

$(document).ready(function () {
        //初始化select2
        toLoadmaterial();
        //SELECT2数据回显
        var data = '${material_list}';  //material_list格式：[{id:"",name:""}]
        if(data!=undefined&&data!=''){
            var value = JSON.parse(data);
            echoSelect2("#material_id",value);
        }
    })

//回显数据
    function echoSelect2(dom,value){
        $.each(value,function(index,value){
            $(dom).append(new Option(value.name, value.id, false, true));
        });
        $(dom).trigger("change");
    }