正文
select2 插件加载后端数据
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
//html
<select class="form-group form-control" name="roomId" id="roomList" data-op="eq" data-type="L" title="请选择租赁空间">
<option value="">全部</option>
</select>
function selectRoomId(select) {
$(select).select2({
ajax: {
url: webroot + "/spaceRoom/listRoom?buildingId=&floor=",
dataType: 'json',
delay: 250,
data: function(params) {
var query = {
code: params.term
}
return query;
},
processResults: function(data, params) {
//请求接口返回数据
params.page = params.page || 1;
return {
results: data.result
};
},
cache: true
},
//options
language: "zh-CN",
placeholder: '请输入房间号',
allowClear: true,
width: '300px',
//键盘选择事件
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
}
// 数据列表
function formatRepo(repo) {
if (repo.loading) {
return repo.text;
}
var markup = "<div></div>";
markup += "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__title'>" + repo.roomPath + "</div>";
return markup;
}
//选择填入内容和返回字段
function formatRepoSelection(repo) {
return repo.text || repo.roomPath || repo.id;
}
//调用
var roomIds = $('#roomList');
selectRoomId(roomIds);
//这里是post请求，传参为json（上面是get请求）
function selectRoomId(select) {
$(select).select2({
ajax: {
url: webroot + '/spaceRoom/listRoom',
dataType: 'json',
delay: 250,
type:'POST',
contentType: "application/json",
data: function(params) {
var paramss = {
code: params.term
};
return JSON.stringify(paramss);
},
processResults: function(data, params) {
//请求接口返回数据
params.page = params.page || 1;
return {
results: data.result
};
},
cache: true
},
//options
language: "zh-CN",
placeholder: '请输入房间号',
allowClear: true,
width: '300px',
//键盘选择事件
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
}
// 数据列表
function formatRepo(repo) {
if (repo.loading) {
return repo.text;
}
var markup = "<div></div>";
markup += "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__title'>" + repo.roomPath + "</div>";
return markup;
}
//选择填入内容和返回字段
function formatRepoSelection(repo) {
return repo.text || repo.roomPath || repo.id;
}
