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 里面的方法了。