求一个select2 ajax请求后台数据搜索下拉框功能 并回显选中项的demo
软件后台是java编写的
求一个select2 ajax请求后台数据搜索下拉框功能 并回显选中项的demo
https://www.cnblogs.com/-mrl/p/7650156.html
这个帖子我已经试过了 搜索功能失效 不要在推荐了
强调一下 是用ajax请求的数据 而不是用本地的方式注入
这些都试了 不行的
/* 1-本地注入方式 */
/*$(".downList2").select2({
// $("select[name='xuewei_id']").select2({
// $('select[id="xuewei_id"]').select2({
// $('#xuewei_id').select2({
placeholder : "请至少选择一个人名",
tags : true,
createTag : function(decorated, params) {
return null;
},
width : '256px',
});*/
// 2- AJAX获取数据方式
$(".downList2").select2({
ajax: {
type:'GET',
url: 'http://localhost:8080/erzhentang/manage/forAjax.do?requestType=12.5_1',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term 请求参数
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
var itemList = [];
var arr = data.result.list
for(item in arr){
itemList.push({id: item, text: arr[item]})
}
return {
// results: data.items,//itemList
results: data,//itemList
pagination: {
more: (params.page * 2) < data.total_count
}
};
},
cache: true
},
placeholder:'请选择',//默认文字提示
language: "zh-CN",
tags: true,//允许手动添加
createTag : function(decorated, params) {
return null;
},
allowClear: true,//允许清空
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
minimumInputLength: 0,
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
});
$("#select2").select2({
placeholder: "请选择",
language: "zh-CN",
ajax: {
url: "apiurl",//接口地址
dataType: 'json',
delay: 250,
data: function (params) {
return {
search: params.term, // search term
};
},
processResults: function (data, params) {
var result = $.map(data.rows,
function (v, k) {
return { id: v.Id, text: v.Name };
});
return {
results: result
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // 字符转义处理
minimumInputLength: 1,
templateResult:function (repo) {
if (repo.loading) {
return repo.text;
}
return repo.text;
},
templateSelection: function (repo) { return repo.text }
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>select2</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- select2 style -->
<link rel="stylesheet" href="select2.min.css">
<script src="select2.full.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" style="background-color:#ecf0f5;">
<!-- Main content -->
<section class="content container" style="margin-top: 15px;">
<div class="col-sm-4">
<h3>本地数据方式</h3>
<select class="form-control input-sm downList1">
<option></option>
</select>
<p class="p1"></p>
<hr>
<button type="button" class="btn btn-sm btn-primary" id="one">click</button>
</div>
<div class="col-sm-4">
<h3>AJAX获取数据方式</h3>
<select class="form-control input-sm downList2" multiple>
<option></option>
</select>
<p class="p2"></p>
<hr>
<button type="button" class="btn btn-sm btn-primary" id="two">click</button>
</div>
</section><!-- /.content -->
</body>
<script>
//one 本地数据方式
var dataList = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
];
$(".downList1").select2({
data: dataList,
placeholder:'请选择',//默认文字提示
language: "zh-CN",
allowClear: true//允许清空
})
$('#one').click(function(){
var id = $(".downList1").select2("data")[0].id;
var text = $(".downList1").select2("data")[0].text;
var html = '您选择了：' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
$('.p1').text(html);
})
//two AJAX获取数据方式
$(".downList2").select2({
ajax: {
type:'GET',
url: 'data.php',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term 请求参数
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
/*var itemList = [];
var arr = data.result.list
for(item in arr){
itemList.push({id: item, text: arr[item]})
}*/
return {
results: data.items,//itemList
pagination: {
more: (params.page * 2) < data.total_count
}
};
},
cache: true
},
placeholder:'请选择',//默认文字提示
language: "zh-CN",
tags: true,//允许手动添加
allowClear: true,//允许清空
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
minimumInputLength: 0,
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
});
$('#two').click(function(){
var userList = $(".downList2").select2("data");
var user = [];
for(var i=0;i<userList.length;i++){
user.push(userList[i].id)
}
$('.p2').text(user);
})
</script>
</html>
我写了一个test 感觉跟你代码一样 没什么问题 是不是你其他地方的问题 你可以下载看看
https://pan.baidu.com/s/1W1te6rWD1WLv-FKMZNzMOw
插件 jQuery autocomplete
$('select').select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
data: function (params) {
var query = { //请求的参数, 关键字和搜索条件之类的
search: params.term //select搜索框里面的value
}
// Query paramters will be ?search=[term]&page=[page]
return query;
},
delay: 1500,
processResults: function (data, params) {
//返回的选项必须处理成以下格式
//var results = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
return {
results: results //必须赋值给results并且必须返回一个obj
};
}
}
});