select2

.select2-container .select2-choice {  
  height: 34px;  
  line-height: 34px;  
}  

1.自定义 组件高度
 在css 里面设置

.select2-container .select2-choice {  
  height: 34px;  
  line-height: 34px;  
}  

 

2.自定义宽度 和 监听 change事件（coffeescript语法）

$('#time_scope_scope_id').select2({'width':'200px'}).on("change", (e) ->   
       refresh_tab()  
)  

 

 

 

http://blog.csdn.net/remote_roamer/article/details/47732349 

select2 4.02 实现类似google搜索条的 ajax remote data功能

1,构建一个 select2 的 下拉框，
这里注意，不能用input 来构建了

<select id="park_code"></select>  

2,初始化成select2 对象

 $("#park_code").select2({  
        placeholder: "选择一个停车场",  
        ajax: {  
            url: "/park_seek/",  
            dataType: 'json',  
            delay: 500,  
            data: function (params) {  
                return {  
                    q: params.term, // search term  
                    page: params.page  
                };  
            },  
            processResults: function (data, page) {  
            // parse the results into the format expected by Select2.  
            // since we are using custom formatting functions we do not need to  
            // alter the remote JSON data  
                console.debug("ajax返回的对象是:")  
                console.debug(data.items)  
                return {  
                    results: data.items  
                };  
            },  
            cache: true  
        },  
        escapeMarkup: function (markup) {   
            console.debug(markup)  
            return markup;   
        }, // let our custom formatter work  
        minimumInputLength: 1,  //至少输入多少个字符后才会去调用ajax  
        maximumInputLength: 20, //最多能输入多少个字符后才会去调用ajax  
        minimumResultsForSearch: 1,  
        width: "260px",  
        templateResult: formatRepo,   
        templateSelection: formatRepoSelection,  
    });  
  
  
    $("#park_code").on("change",function (e){  
        can_analyse();  
    })  

/* 这里2个函数是用于查询到内容后，显示在select2的下拉框里面 */  
function formatRepo (repo) {  
    if (repo.loading) return repo.text;  
    repo.text = repo.name  
    repo.id = repo.code  
    var markup = '<div class="clearfix">' +  
    '<div class="col-sm-4">' + repo.code + '</div>' +  
    '<div class="col-sm-20">' + repo.name + '</div>' +  
    '</div>';  
  
    return markup;  
}  
  
function formatRepoSelection (repo) {  
    repo.selected = true;   
    repo.code = repo.id  
    repo.name = repo.text  
    if(repo.code == null || repo.code == ""){  
        repo.text = '请选择一个停车场'  
        repo.name = repo.text  
    }  
    $("#park_name").val(repo.name);  
    console.debug(repo);  
    return repo.code ;  
}  
/* 这里2个函数是用于查询到内容后，显示在select2的下拉框里面  end */ 

3.通过其他的js函数对这个select2 进行赋值

$("#park_code").empty().append('<option id="'+code+'" value="'+code+'">'+name+'</option>').trigger('change');  

注意：这里要trigger 这个 change 的 事件，这样才会调用formatRepoSelection 这个方法，并且刷新UI。

 

后台提供的json对象
{
items: 
[
{
id: "02469",
code: "02469",
name: "大树路4"
},
{
id: "02470",
code: "02470",
name: "大树路2"
},
{
id: "02779",
code: "02779",
name: "大树路1"
},
{
id: "02679",
code: "02679",
name: "大树路3"
}
]
}
注意几个问题:
1.如果返回的json里面没有id。则会出现查询的对象无法选择的问题。处理方式，就是在返回的josn对象里面加入  id 这个唯一标示
相关内容http://kanpiaoxue.iteye.com/blog/2153468
2.formatRepoSelection函数中，缺省的是处理repo 对象 的 id 和 text 这2个属性，而我这里定义的json是是code 和 name，所以需要把code 和 name 复制到 id 和 text里面。否则没法显示在界面上。另外一种简单的处理方法，可以把json对象直接变成 id 和 text的结构。这样就不用定制 select2 里面的方法了。