select2是一款jQuery插件，是普通form表单select组件的升级版。
可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、无限滚动（数据分页功能，这一点很妙）、还有很多高端的参数设置（有需要的下次介绍）。
内置了40种国际化语言，不过这里我们只需要用到中文。
同时支持现代和传统浏览器内置，甚至包括惹人不高兴的IE8。
那么，现在让我们开始一段select2的奇幻之旅吧！
一、惊艳的效果，来一睹为快吧
本地实战结果
二、导入css和js到网站上
1.使用CDN，节省自己网站的流量
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
2.下载文件到本地，可以做一些个性的定制（比如说修改提示语）
<!-- select2 --> <link type="text/css" href="https://www.jb51.net/${ctx}/common/select2/css/select2.css" /> <script type="text/javascript" src="https://www.jb51.net/${ctx}/common/select2/js/select2.full.js"></script> <!-- 中文国际化还需要进行参数设置 --> <script type="text/javascript" src="https://www.jb51.net/${ctx}/common/select2/js/i18n/zh-CN.js"></script>
三、真刀真枪的干起来
第一步、定制页面个性化元素
<select href="${ctx}/member/loadMembersInfo.do?uid=${mem.uid}" inputMessage="请输入会员编号(可部分匹配)"> <option selected="selected" value="666">沉默王二</option> </select>
Java端通过name属性可获得select的value值。
设置class为js-data-example-ajax，页面加载时对该组件进行select2的初始化。
href属性为ajax提供后台检索的URL。
style设置组件的宽度。
inputMessage属性定制个性化的提示语，默认的英文版为Please enter 1 or more characters，中文国际化为“请再输入至少1个字符”，都不太能满足个性化需求，所以需要改，后面介绍。
提供一个默认的option，页面没检索之前显示。
第二步、select2组件化，注释写得很详细了哦
<script type="text/javascript"> $(function() { $("select.js-data-example-ajax").each( function() { var $this = $(this); $this.select2({ language : "zh-CN",// 指定语言为中文，国际化才起效 inputMessage : $this.attr("inputMessage"),// 添加默认参数 ajax : { url : $this.attr("href"), dataType : 'json', delay : 250,// 延迟显示 data : function(params) { return { username : params.term, // 搜索框内输入的内容，传递到Java后端的parameter为username page : params.page,// 第几页，分页哦 rows : 10// 每页显示多少行 }; }, // 分页 processResults : function(data, params) { params.page = params.page || 1; return { results : data.data,// 后台返回的数据集 pagination : { more : params.page < data.total// 总页数为10，那么1-9页的时候都可以下拉刷新 } }; }, cache : false }, escapeMarkup : function(markup) { return markup; }, // let our custom formatter work minimumInputLength : 1,// 最少输入一个字符才开始检索 templateResult : function(repo) {// 显示的结果集格式，这里需要自己写css样式，可参照demo // 正在检索 if (repo.loading) return repo.text; var markup = repo.username; markup += repo.realname; var markup = "<div>" + "<div><img src='" + repo.headimgUrl + "' /></div>" + "<div>" + "<div>" + repo.username + "</div>"; if (repo.realname) { markup += "<div>" + repo.realname + "</div>"; } markup += "<div>" + "<div><i></i> 下级会员数" + repo.children_count + " </div>" + "</div>" + "</div></div>"; return markup; }, templateSelection : function(repo) { return repo.realname || repo.text; }// 列表中选择某一项后显示到文本框的内容 }); }); }); </script>
第三步、Java端接收参数并返回结果集，不用我强调，这步很重要
@RequestMapping(value = "loadMembersInfo") public void loadMembersInfo(HttpServletRequest request, HttpServletResponse response) throws IOException { Integer uid = StrUtil.parseStringToInt(request.getParameter("uid")); Members mem = this.memberService.selectByPrimaryKey(uid); // 分页参数的转换，需要和前台select2进行匹配，下文放代码 BaseConditionVO vo = getBaseConditionVOForTable(request); vo.addParams("username", StrUtil.getUTF8String(request.getParameter("username"))); vo.addParams("uid", uid); // 封装结果集，和前台select2也是匹配的。 PageGrid page = createPageGrid(this.membersMapper.getPromoterList(vo, vo.createRowBounds()), vo, this.membersMapper.searchPromoterTotalCount(vo)); // 以json格式写入到response out(page, response); }
接下来，把关键的源码贴出来，可能和你的项目不吻合，但可以参考。