Select2 4.0.3自动补全插件使用说明

1、我项目中使用的是Select2 4.0.3[特别需要强调的是selec2 4.0以后的版本和3.x的版本使用差距很大，具体可参见源码]

 

2、使用select2 插件需要引入其js和css，还有4.0以后特定转化语言的js文件

//样式

<linkrel="stylesheet"href="${ctx}/static/css/select2.min.css"> 

//js

<scriptsrc="${ctx}/js/plugins/autocomplete/select2.min.js"></script>

<scriptsrc="${ctx}/js/plugins/autocomplete/i18n/zh-CN.js"></script>

 

3、前端页面，一个空的<select></select>标签，里面的name、id属性自定义

4、ajax动态请求数据

Ajax请求说明：

0）、$("#blocksSelect").select2({…})此处的id和select对应

1）、language:"zh-CN", 需要引入zh-CN的js，汉化select2插件，默认是英文的；

2）、placeholder:{id:'',text:'请输入房屋地址'},

     allowClear: true,

配套使用，select2插件输入框默认显示的值；

3）、

重写源码中的方法，适应自己项目中的提示语；

4）、minimumInputLength:1, 查询时 至少输入的字符个数

5）、id :function(data){

        return data.id;

    },

Id转化函数，select2查询出来的结果，如要选择的话，需要转化成id；

6）、

Ajax请求，后端返回的json随便定义，但是一定要返回一个主键值，在转换成id，这样在select4.0之中才能选中，具体在processResults函数中完成，其中processResults函数中需要根据后端返回的参数来判断动态加载的当前页和总条数。

具体：pagination: {more: (data.number * 10) < data.totalElements

Number：页数；

totalElements：总条数；

设置了这个之后，页面鼠标滚动即可动态加载数据；Data，即动态获取页面输入的值和相关参数

Data，即动态获取页面输入的值和相关参数

7）、函数说明

escapeMarkup:function (markup) { return markup; }, //字符转义处理

templateSelection:formatRepoSelection, //获取输入框选择的值       

templateResult:formatRepo //查询返回值渲染

5、页面渲染函数

6、选中之后，在select2输入框显示函数

7、返回的json转换成id之后，可以直接删除，如果通过某个清空的button来清空select2选中的值得话，可以通过：

$("#blocksSelect").val("请输入房屋地址").trigger("change");这样来设置

需要注意的是：select4.0以后，

1.如果返回的json里面没有id。则会出现查询的对象无法选择的问题。处理方式，就是在返回的josn对象里面加入 id这个唯一标示

2.formatRepoSelection函数中，缺省的是处理repo对象的 id 和 text 这2个属性，而我这里定义的json是是PKID和 NAME，所以需要把PKID和 NAME复制到 id和 text里面。否则没法显示在界面上。另外一种简单的处理方法，可以把json对象直接变成 id和 text的结构。这样就不用定制 select2里面的方法了。