select2

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

 .自定义 组件高度
  在css 里面设置
 
 .select2-container .select2-choice {
   height: 34px;
   line-height: 34px;
 }  

 .自定义宽度 和 监听 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: ,
            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: ,  //至少输入多少个字符后才会去调用ajax
        maximumInputLength: , //最多能输入多少个字符后才会去调用ajax
        minimumResultsForSearch: ,
        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: "",
code: "",
name: "大树路4"
},
{
id: "",
code: "",
name: "大树路2"
},
{
id: "",
code: "",
name: "大树路1"
},
{
id: "",
code: "",
name: "大树路3"
}
]
}
注意几个问题:
.如果返回的json里面没有id。则会出现查询的对象无法选择的问题。处理方式，就是在返回的josn对象里面加入  id 这个唯一标示
相关内容http://kanpiaoxue.iteye.com/blog/2153468
.formatRepoSelection函数中，缺省的是处理repo 对象 的 id 和 text 这2个属性，而我这里定义的json是是code 和 name，所以需要把code 和 name 复制到 id 和 text里面。否则没法显示在界面上。另外一种简单的处理方法，可以把json对象直接变成 id 和 text的结构。这样就不用定制 select2 里面的方法了。