select2组件

原创
2015/08/18 16:45
阅读数 4.3K

select2组件功能强大,包含异步、回调、事件、格式化等内容,下面简单做个例子

<input type="hidden" id="b" class="select2 input-large" name="item"/>

封装组件入口,一般使用$.fn.showItem封装

window.showItem = function (b, url) {
        $("#"+b).select2({
            allowClear: true,
            placeholder:"Select an IG",
            ajax: {
                url: url,
                dataType: 'json',
                quietMillis: 250,
                data: function (term, page) {
                    term = $.trim(term);
                    term = term === '' ? '' : term;
                    return {
                        q: term, //search term
                        page: page  // page number
                    }
                },
                results: function (data, page) {
                    var more = (page * 10) < data.total;
                    return { results: data.items, more: more};
                }
            }
        });

其中,q为输入框输入搜索参数,page为页数,quietMillis为延迟多少毫秒发送ajax请求,data为返回json参数内容。

添加一个简单的Spring MVC控制器

/**
 * @param param 查询参数
 * @param page 查询页数
 * @return json
 */
@RequestMapping("select")
@ResponseBody
public String selection(@RequestParam("q") String param, @RequestParam("page") Long page) {
    return "{\"total\":4,\"param\":\"" + param + "\",\"page\":" + page + ",\"items\":" +
            "[{\"id\":\"tag1\",\"text\":\"tag1\"},{\"id\":\"tag2\",\"text\":\"tag2\"}," +
            "{\"id\":\"tag3\",\"text\":\"tag3\"},{\"id\":\"tag4\",\"text\":\"tag4\"}]}";
}

注意,如果是select标签,使用select2的ajax会报错,要改为input标签,并设置type=hidden;如果是静态的页面包含select>option的,直接用$(selector).select2();渲染即可。

更多内容请查看http://select2.github.io/select2/

展开阅读全文
打赏
0
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
0
分享
返回顶部
顶部