select2的远程加载非分页实例

简介: $("#c01-select").select2({ ajax: { url: "data.json", dataType: 'json', delay: 250, data: function (params) { return { q: params.

 

$("#c01-select").select2({
ajax: {
url: "data.json",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
};
},
processResults: function (data) {

var items=data.mapList; //json数组
var itemList = [];
for(var i =0; i < items.length; i++){
itemList.push({id: items[i].id, text: items[i].name});
}

/或者

*$.each(items,function(index,item){

temList.push({id: item.id, text: item.name});

})*/
return {
results: itemList
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
说明:

1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名)

2.processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,
则返回data.res。这个与服务器返回json有关)

3.minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示
最大输入限制。

4.escapeMarkup字符转义处理

5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结
果的的text显示到下拉框里,当然你可以return repo.text+"1";等

6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

7.关于返回的 json的格式:select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版
严格要求这样的格式,当然你可以添加列,如:[{id:1,text:'text',name:'liu'}]

五.获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
alert("你没有选中任何项");
}
if(reslist.length)
{
alert("你选中任何项");
}

目录
相关文章
|
数据库连接
DbVisualizer数据库连接工具默认查询结果只显示100条解决方法,dbvis如何展示更多行,如何显示全部数据
DbVisualizer数据库连接工具默认查询结果只显示100条解决方法,dbvis如何展示更多行,如何显示全部数据
1616 0
DbVisualizer数据库连接工具默认查询结果只显示100条解决方法,dbvis如何展示更多行,如何显示全部数据
|
3月前
|
SQL Java 数据库连接
JDBC连接SQL Server2008 完成增加、删除、查询、修改等基本信息基本格式及示例代码
这篇文章提供了使用JDBC连接SQL Server 2008数据库进行增加、删除、查询和修改操作的基本步骤和示例代码。
JPA自定义查询
JPA自定义查询
|
存储 SQL 关系型数据库
PG通过表访问方法API如何执行顺序扫描
PG通过表访问方法API如何执行顺序扫描
125 0
|
JavaScript
el-table分页数据+回显+勾选状态+记录数据(map实战)
el-table分页数据+回显+勾选状态+记录数据(map实战)
901 0
|
SQL 算法 测试技术
100w条记录分页,可以有多快?—— DataReader分页与SQL语句分页的对比测试(在线演示)
  上周看到了两篇关于DataReader分页的帖子,帖子的观点都是可以是用DataReader来分页,而且效率还不错。     根据我的分页经历来看,很难理解DataReader分页怎么就快了呢?理论上就不说了,直接用测试说话。
1125 0
|
SQL 数据库
分页解决方案 之 QuickPager的使用方法(PostBack分页、自动获取数据)
      适用范围:网站后台管理、OA、CRM、CMS等,从关系型数据库里提取数据,愿意使用Pager_SQL、DataAccessLibrary的情况。       最佳数据库:MS SQL。
813 0
|
SQL 算法 数据库
分页解决方案 之 分页算法——Pager_SQL的详细使用方法和注意事项
      上一次有点匆忙,如何使用介绍的不是太清楚,而且这两天有改掉了几个bug,所以这次呢详细说一下,然后更新一下代码和demo。       源代码和demo的下载:http://www.cnblogs.com/jyk/archive/2008/07/29/1255891.html                      JYK.Controls.Pager.QuickPagerSQL PagerSQL = new QuickPagerSQL();            //设置保存属性的位置。
940 0
|
SQL 算法
分页解决方案 之 QuickPager的使用方法(URL分页、自动获取数据)
      适用范围:网站前台页面 等,从关系型数据库里提取数据,愿意使用Pager_SQL、DataAccessLibrary的情况。       优点:使用URL的方式,对于SEO比较友好。
965 0
【视频】配置信息管理 的 使用方法(六):实现添加、修改、查询
   这个是使用配置信息管理实现添加、修改、查询的方法。    感谢 svnhost.cn 提供空间    
703 0