2013-01-14 117 views
4

基本上我想要做的是有输入充当一个显示器,当点击字段我希望有下拉搜索字段相同的单选择。样式select2多选与单选相同?

下面的(做得不好)模型可以比我更好地解释这个。

enter image description here

不选择二有此内置功能,还是有一个简单的方法来做到这一点?

+0

这是一种很难搞清楚你在寻找什么。在选择的插件上选择一个性别,这是否做你想要的? – Evan

+0

Select2是基于选择的,看看[演示页面](http://ivaynberg.github.com/select2/)了解单个选择是如何工作的?现在看看多选,我喜欢多选的整个“标记”,但我不想输入“标记输入”,我想要一个搜索字段在下面显示,就像它在单个选择版本。 – Hailwood

+0

这里有一个Select2加载的小提琴,如果有人想小提琴。 http://jsfiddle.net/isherwood/yJYpY/我认为你必须破解S2核心才能实现这个工作。 – isherwood

回答

0

对于那些仍在寻找解决方案的人,请看看我的小提琴。

我用一对夫妇张贴了关于这个问题的小提琴,这一切组合到1

并不完美,但它的工作原理。

https://jsfiddle.net/Lkkm2L48/7/

jQuery(function($) { 
    $.fn.select2.amd.require([ 
    'select2/selection/single', 
    'select2/selection/placeholder', 
    'select2/selection/allowClear', 
    'select2/dropdown', 
    'select2/dropdown/search', 
    'select2/dropdown/attachBody', 
    'select2/utils' 
    ], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) { 

     var SelectionAdapter = Utils.Decorate(
     SingleSelection, 
     Placeholder 
    ); 

    SelectionAdapter = Utils.Decorate(
     SelectionAdapter, 
     AllowClear 
    ); 

    var DropdownAdapter = Utils.Decorate(
     Utils.Decorate(
     Dropdown, 
     DropdownSearch 
    ), 
     AttachBody 
    ); 

     var base_element = $('.select2-multiple2') 
    $(base_element).select2({ 
     placeholder: 'Select multiple items', 
     selectionAdapter: SelectionAdapter, 
     dropdownAdapter: DropdownAdapter, 
     allowClear: true, 
     templateResult: function (data) { 

     if (!data.id) { return data.text; } 

     var $res = $('<div></div>'); 

     $res.text(data.text); 
     $res.addClass('wrap'); 

     return $res; 
     }, 
     templateSelection: function (data) { 
     if (!data.id) { return data.text; } 
     var selected = ($(base_element).val() || []).length; 
     var total = $('option', $(base_element)).length; 
     return "Selected " + selected + " of " + total; 
     } 
    }) 

    }); 

}); 

CSS:

.select2-results__option .wrap:before{ 
    font-family:fontAwesome; 
    color:#999; 
    content:"\f096"; 
    width:25px; 
    height:25px; 
    padding-right: 10px; 

} 
.select2-results__option[aria-selected=true] .wrap:before{ 
    content:"\f14a"; 
}