select2 的分页搜索加载的简单实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Select2 分页加载</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet">
</head>
<style>
/*.input-text{
width:85%;
height:200px ;
line-height:200px ;
margin: 0;
padding: 0;
padding-left:5px;
border-width:1px;
}*/
/*change dropdowm offset*/
/*.select2-dropdown {
margin-left: 8px !important;
margin-top: 20px !important;
}*/
/*change box width height*/
.select2-results__options {
max-height: 600px;
}
/*change click selection height*/
.select2-selection__rendered {
line-height: 50px !important;
}
.select2-container .select2-selection--single {
height: 50px !important;
}
.select2-selection__arrow {
height: 50px !important;
}
/* .select2-choices {
min-height: 300px;
max-height: 300px;
overflow-y: auto;
}*/
/*change search inpu height*/
.select2-search input {
height: 50px !important;
}
</style>
<body>
<div style="width: 85%;">
<h1>Select2 分页加载</h1>
<div class="s1-example">
<select id="selectDemo" style="width:100%;height: 50px;" class="select2-dropdown" name="selectDemo" ></select>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var data_count = 10;
$("#selectDemo").select2({
ajax: {
url: "https://api.apiopen.top/getWangYiNews",
dataType: 'json',
delay: 250,
data: function (params) {
var query = {
search: params.term,
page: params.page || 1,
count: data_count
}
return query;
},
processResults: function (data,params) {
params.page = params.page || 1;
console.log(data);
var array = data.result;
var i = 0;
while(i < array.length){
array[i]["id"] = array[i]['title'];
array[i]["text"] = array[i]['title'];
delete array[i]["title"];
// delete array[i]["label"];
i++;
}
console.log(data_count,data.result.length);
return {
results: array,
pagination : {
//判断数据是否加载完成
more : data_count <= data.result.length
}
};
},
cache: true
},
placeholder: '请输入关键字',
escapeMarkup: function (markup) {return markup; },
//最小的搜索字数
minimumInputLength: 0,
// templateResult : formatPromCode,
formatSelection: formatSelect
})
// 自适应
remChange();
window.addEventListener('resize', remChange);
function remChange() {
remove();
let width = window.screen.width;
let fixedw = 750;
let scale = width / fixedw; //获取到的屏幕宽度比上自定义的750宽度 获得对应比例
let meta = document.createElement("meta");
meta.setAttribute('name', 'viewport');
//将对应比例填入meta标签即可实现宽度自适应
meta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`);
//meta将标签添加到文档中即可
document.head.appendChild(meta);
}
function remove() {
let meta = document.querySelector("meta[name='viewport']");
if (meta != null) {
document.head.removeChild(meta);
}
}
});
function format(results){
if (results.loading) {
return results.text;
}
if(results.id){
return '<option value="'+ results.id +'">' + results.text + '</option>';
}
}
function formatSelect(results){
return results.id || results.text;
}
</script>
</body>
</html>
网友评论