Select2用法简介

按照产品汪的要求终于做完了数据展示，前台后台一锅端的感觉只有试过才知道~

谁知道提测完毕汪又要求加上按产品名称模糊搜索功能（怨念），后台代码当然是简单又轻松，但是前台的搜索框怎么搞！

学校里主要研习后端但是在公司还要兼做前段，捯饬JS着实头疼啊~

但是又不能不搞，现成代码相当多，但是注释以及方法参数的解释都十分的少，导致像我这么笨的人学起来相当吃力啊

好在有时间乐的自己慢慢测试用法，有了收获就得善于总结不是，趁热乎赶紧记下来...

选用功能强大的Select2来实现搜索功能，类似AutoComplete的功能正是我所需要的（官网参见http://select2.github.io/）

但是数据过多，产品表有3W余条数据，不可能全部在前端交由用户筛选，故此搜索框至少要求输入一个字符之后才会显示下拉框

按照输入的字符利用AJAX进行异步查询，然后再将结果交由用户进行选择

页面只要有个简单的INPUT框就可以

<input style="width: 300px" id="test" />

前台JS代码如下

$('#test').select2({
	placeholder: "请输入",  
	minimumInputLength: 1,  //最低输入字符数
	separator: ",", // 分隔符  
	maximumSelectionSize: 1, // 限制数量  
	ajax: {
		url: '<%=request.getContextPath()%>/stuffConsumptionDetail/queryProductList.mmx',
		type : "POST",
		dataType : 'json',
		quietMillis : 100,
		data : function(term) {
			term = escape(encodeURIComponent(term));
			return {
				productName : term
			};
		},
		results : function(data) {
		var myResults = [];
		$.each(data, function(index, item) {
			myResults.push({
				'id' : item.pcode,
				'text' : item.pname
			});
		});
		return {
			results : myResults
		};
		}
	}
});

之前一直出现 TypeError: data.results is undefined的错误

究其原因是因为Select2用的是JSONP而不是JSON的格式（区别参见http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html）

所以如下这段代码的用处也就不言而喻了~

$.each(data, function(index, item) {
			myResults.push({
				'id' : item.pcode,
				'text' : item.pname
		});
	});

同时有一个需要注意的问题就是汉字传输问题

经试验如果输入汉字传输会变成乱码，所以传输时要进行编码解码，然而编码结束后后台接到参数调用java.net.URLDecoder.decode(productName,"UTF-8");后发现解码并不好使

经测试发现如下语句会进行两次编码，此处深坑！

escape(encodeURIComponent(term))

所以解码是应进行两次编码

此时就可以完美支持汉字了