Jquery Select2-3.3.2 autocomplete 使用
富贵 2013-05-06
Select2-3.3.2 官网：http://ivaynberg.github.io/select2/
先上一个自己的效果图，样式啥的基本没有调，主要测试从后台获取数据：
一些基本的例子上面都有，但是在使用ajax从后台获取数据的时候有些问题，查了一些资料后，下面的链接给出了解决方案：http://it.toolbox.com/blogs/rymoore/select2-jquery-select-boxes-54810
官网上使用ajax方式调用返回的格式是 jsonp 的，jsonp什么的据说是跨域调用的，不太理解，下面这个链接详细解释了jsonp的使用及调用，没看懂：http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
最终选择了返回json格式的数据，前台调用的格式为：
<input name="TEST_SEARCH" type="hidden" id="userSelect" style="width: 600px" />
//智能提示
$('#userSelect').select2({
placeholder: "请输入货位码",
minimumInputLength: 2,
multiple:true,
ajax: {
url: "meselect.cmd?method=select2FromAjax",
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 5,
area_id: "<%=area_id%>",
storearea_id: "<%=storearea_id%>",
house_id: "<%=house_id%>"
};
},
results: function (data, page) {
return { results: data.results };
},
formatResult: function(medata){
},
formatSelection: resultFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; }
}
});
function resultFormatResult(medata) {
return medata.text;
}
function resultFormatSelection(medata) {
return medata.text;
}剩下要做的就是从后台拼接json串了，很多种方式，附件中有我的一个简单实现，当然可以使很复杂的逻辑（参见例子e9）
使用注意事项：
1、引入的js及css文件
<link href="jsp/com/wms/component/select2-gh-pages/bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="jsp/com/wms/component/select2-gh-pages/select2-3.3.2/select2.css" rel="stylesheet"/> <link href="jsp/component/select2-gh-pages/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/> <script src="jsp/com/wms/component/select2-gh-pages/js/json2.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/js/jquery-1.7.1.min.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/js/jquery-ui-1.8.20.custom.min.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/js/jquery.mousewheel.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/prettify/prettify.min.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/bootstrap/js/bootstrap.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/js/html5shim.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/select2-3.3.2/select2.js"></script> <script src="jsp/com/wms/component/select2-gh-pages/select2-3.3.2/select2_locale_zh-CN.js"></script> <link href="jsp/com/wms/component/select2-gh-pages/prettify/prettify.css" rel="stylesheet"/>
2、上面引入的js中，一定要引入jquery-1.7.1.min.js，官网提供的jquery-1.8.1.min.js有些问题，会导致页面很慢
3、国际化，引入下面的模板即可
<script src="jsp/com/wms/component/select2-gh-pages/select2-3.3.2/select2_locale_zh-CN.js"></script>
4、 多看官网的文档
备注：
1、附件 select2-src.zip 是server端的，参考下结构就可以了
2、附件 select2-gh-pages.zip 是web前端的组件
