select2组件

标签：

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/

select2组件

标签：

原文地址：http://my.oschina.net/Barudisshu/blog/494072