select2使用示例 原

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'));