使用select2插件做联动查询

最近跟的一个项目整体的架构采用的是win 8(metro)风格，里面用到了很多插件，其中有一个select2.js(官网：http://ivaynberg.github.io/select2)，这个插件的功能非常强大，我只用到了其中的一个——联动查询。一、页面部分二、js部分$(document).ready(function({$("#as_num").select2(

文章共1,017字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

花飘万家雪

16933人浏览 · 2013-09-06 16:12:50

花飘万家雪 · 2013-09-06 16:12:50 发布

最近跟的一个项目整体的架构采用的是win 8(metro)风格，里面用到了很多插件，其中有一个select2.js(官网：http://ivaynberg.github.io/select2)，这个插件的功能非常强大，我只用到了其中的一个——联动查询。

效果图：

一、页面部分

<input type="text" id="num" value="${num}" num_text="${numText}">

二、js部分

$(document).ready(function({
    $("#num").select2({
	placeholder:"输入一个AS号码",//文本框的提示信息
	minimumInputLength:1,	//至少输入n个字符，才去加载数据
	allowClear: true,	//是否允许用户清除文本信息
	ajax:{
		url:'${pageContext.request.contextPath }/……!getASNumber.do',	//地址
		dataType:'text',	//接收的数据类型
		//contentType:'application/json',
		data: function (term, pageNo) {		//在查询时向服务器端传输的数据
			term = $.trim(term);
	                return {
	                     autNumber: term, 	//联动查询的字符
	                     pageSize: 15,	//一次性加载的数据条数
	                     pageNo:pageNo,	//页码
	                     time:new Date()//测试
	                 }
		},
		results:function(data,pageNo){
			if(data.length>0){	//如果没有查询到数据，将会返回空串
			var dataObj =eval("("+data+")");	//将接收到的JSON格式的字符串转换成JSON数据
			var more = (pageNo*15)<dataObj.total;	//用来判断是否还有更多数据可以加载
			    return {
				results:dataObj.result,more:more	
			    };
			}else{
			    return {results:data};
			}						
		}
	},
        initSelection:function(element,callback){           //初始化，其中doName是自定义的一个属性，用来存放text的值
               var id=$(element).val();
               var text=$(element).attr("numText");
               if(id!=''&&text!=""){
                     callback({id:id,text:text});
               }
        },
	formatResult: formatAsText	//渲染查询结果项
    });
})

//格式化查询结果,将查询回来的id跟name放在两个div里并同行显示，后一个div靠右浮动		
function formatAsText(item){
     var itemFmt ="<div style='display:inline;'>"+item.id+"</div><div style='float:right;color:#4F4F4F;display:inline'>"+item.name+"</div>"
     return itemFmt;
}

三、需要服务器端传输的数据格式：“{'result':[{'id':'4048','text':'4808','name':'CHINA169-BJ'},{'id':'4048','text':'4808','name':'CHINA169-BJ'}],'total':'1'}”

注：返回的数据格式是json格式的，result存放的是符合查询条件的记录前n条数据的一些属性，total存放的是符合查询条件的记录的总数

在联动查询的过程中，向服务器端传送了四个参数，其中 asNumber是指定的查询的数据，pageNo和pageSize是用来做分页效果的( 注：需要自己在后台根据页号跟页码实现分页) ，分别代表页码和每页的记录数，在这里先加载了15条数据，当你鼠标滚动到最底部的时候，就会根据你传的这三个参数，加载下15条的数据。

在做的过程中遇到了一些困难，因为有关select2的资料很少，官网上的例子又看不太明白，花了三天时间才做出来。在这里整理出来与大家分享，希望大家看过之后给我提一些宝贵意见。