Jquery Select2-3.3.2 autocomplete 使用

 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前端的组件