select2使用示例

为什么80%的码农都做不了架构师？>>>   

1.从服务端加载数据初始化后，以后不再请求服务端

• 示例：从服务端获取数据后加载到本地，后续只从本地数据查询

页面html

<div class="form-group">
	<label for="projectId" class="col-sm-2 control-label">项目名<font color="red">*</font></label>
	<div class="col-sm-10">
		<input type="hidden" id="projectId" name="projectId" style="width: 100%;" required/>
		<input type="hidden" id="projectName" name="projectName" required/>
	</div>
</div>

js代码

function makeProjectSelect($id, $name) {
    $id.select2({
        allowClear : true,
        data: [],
        placeholder: '请选择'
    });
	//get请求,项目中做了封装，请换成你自己的get请求代码
    get("/project/list.do", {}, function(result) {
        if(result.status == 200) {
            var projects = result.data.list;
			//将获得的数据放入data中，后续只从这里查询
            var data = [];
            for (var i = 0; i < projects.length; i++) {
                var item = projects[i];
                data.push({
                    id: item.id,
                    text: item.name
                });
            }
            $id.select2({
                allowClear : true,
                data: data,
                placeholder: '请选择'
            });
            $id.select2('val', '');
            $id.on('change', function(e){
                if(e.added != undefined) {
                    $name.val(e.added.text);
                } else {
                    $name.val('');
                    $id.val('');
                }
            });
        }
    });
}
//调用
makeProjectSelect($('#projectId'), $('#projectName'));

2.实时从服务端查询数据

• 示例：输入ip值，实时查询后台数据，模糊查询，支持多选

页面html代码

<div class="form-group">
	<label for="ip" class="col-sm-3 control-label">ip<font color="red">*</font></label>
	<div class="col-sm-9">
		<input type="hidden" id="ip" name="ip" style="width: 100%;" required/>
		<input type="hidden" id="ip_text" />
	</div>
</div>

js代码

function makeNewIpsSelect($id, $name) {
	//查询值，记录上次查询的字符串
    var queryString = '';
    $id.select2({
        allowClear : false,
        data: [],
		//支持多选
        multiple:true,
        minimumInputLength: 1,
        placeholder: '请选择',
        formatSelection: function (item) {
            return item.id;
        },
        formatResult: function (item) {
            return item.text;
        },
        ajax: {
            url: "/server/listIps.do",
            dataType: "json",
            data: function (term, page) {
				//当输入值是空串时，使用上次的查询条件
                if(term.trim() == '') {
                    term = queryString;
                } else {
                    queryString = term;
                }
				//ips是服务端接收的参数名
                return { "ips": term };
            },
            results: function (result, page) {
                var data = [];
                if(result.status == 200) {
                    var list = result.data.list;
					//将记录放入dta中，实时显示
                    for(var index = 0; index < list.length; index++) {
                        var obj = list[index];
                        data.push({
                            id: obj.defaultIp,
                            text: obj.defaultIp + "_" + obj.bussName
                        });
                    }
                }
                return  {results: data};
            },
            escapeMarkup : function (m) { return m; }
        }

    });

    $id.on('change', function(e){
        $name.val(e.val);
        $id.val(e.val);
    });

}

//调用

makeNewIpsSelect($('#ip), $('#ip_text'));

转载于:https://my.oschina.net/funcy/blog/2050736