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的格式（区别参见/article/5649177.html）

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

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

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

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

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

escape(encodeURIComponent(term))

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

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