Select2以输入字段而不是下拉列表开始

我使用js库select2 。 这是我现在拥有的截图：
开始：

点击下拉列表：

现在是否可以有一个输入字段，而不是直接下拉列表？ 我知道这是可能的，因为你可以在select2网站上找到它。 一个例子是：

但文档非常简短。 这就是我现在拥有的：

 function createQuestionTags(data, question_number){ $(".question" + question_number).select2({ createSearchChoice: function (term, data) { if ($(data).filter(function () { return this.text.localeCompare(term) === 0; }).length === 0) { return { id: term, text: term }; } }, data: data, placeholder: "Enter Question", allowClear:true }); } 

（数据是从ajax调用接收的）

Answer 1

您看到的实际上是该示例中的多选或多值下拉框。 它不是您在代码中使用的单个值下拉框。 根据Select2网站，select2将检测到您正在尝试使用多选框，并将自动应用该样式而不是默认（下拉箭头等）。

如果您实际上需要一个值下拉框，则没有直接的方法可以使用多选的格式显示它，使其看起来像一个常规输入框。 可能有一种方法可以通过添加或删除CSS类来伪造它。 我玩了一下但找不到一个。

由于您不需要格式化，搜索框或多选function（我假设）您可能不需要使用select2库。

更新：看起来你不是第一个尝试这样做的人。 他们计划添加此function，但可能需要一段时间： https ： //github.com/ivaynberg/select2/issues/1345

Answer 2

我能想到的唯一解决方法是在设置时同时使用multiple: true和maximumSelectionSize: 1 。

请在此处查看我的示例： http ： //jsfiddle.net/DanEtchy/Lnf8j/

Answer 3

这在Select2 4.0.0中可以使用新的选择适配器。 您可以使用MultipleSelection （包括任何相关的装饰器）替换SingleSelection ，它应该按预期运行。

 $.fn.select2.amd.require([ 'select2/selection/multiple', 'select2/selection/search', 'select2/dropdown', 'select2/dropdown/attachBody', 'select2/dropdown/closeOnSelect', 'select2/compat/containerCss', 'select2/utils' ], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) { var SelectionAdapter = Utils.Decorate( MultipleSelection, Search ); var DropdownAdapter = Utils.Decorate( Utils.Decorate( Dropdown, CloseOnSelect ), AttachBody ); $('.inline-search').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: SelectionAdapter }); $('.dropdown-search').select2({ selectionAdapter: MultipleSelection }); $('.autocomplete').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss), containerCssClass: 'select2-autocomplete' }); }); 

 .select2-selection__choice__remove { display: none !important; } .select2-container--focus .select2-autocomplete .select2-selection__choice { display: none; } 

    
With an inline search box
  Alabama Alaska Arizona  
With the search box in the dropdown
  Alabama Alaska Arizona  
With the selection hidden when it is focused
  Alabama Alaska Arizona  

Answer 4

就我而言，我希望用户从下拉列表中选择的内容显示在下拉列表下方的列表中，而不是像常规下拉列表那样工作。 所以这个解决方法对我有用：

 $('#myselect').select2({ multiple:true }) .on('select2:select', function (e) { //clear the input box after a selection is made $(this).val([]).trigger('change'); }); 

当然，如果您希望所选项目在select2的输入框中保持选中状态，就像使用常规select2多选列表一样，那么这将不起作用。

Answer 5

使用Bootstrap样式的自定义实现，简单但function强大：

 var elements = $(document).find('select.form-control'); for (var i = 0, l = elements.length; i < l; i++) { var $select = $(elements[i]), $label = $select.parents('.form-group').find('label'); $select.select2({ allowClear: false, placeholder: $select.data('placeholder'), minimumResultsForSearch: 0, theme: 'bootstrap', width: '100%' // https://github.com/select2/select2/issues/3278 }); // Trigger focus $label.on('click', function (e) { $(this).parents('.form-group').find('select').trigger('focus').select2('focus'); }); // Trigger search $select.on('keydown', function (e) { var $select = $(this), $select2 = $select.data('select2'), $container = $select2.$container; // Unprintable keys if (typeof e.which === 'undefined' || $.inArray(e.which, [0, 8, 9, 12, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 44, 45, 46, 91, 92, 93, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 124, 144, 145, 224, 225, 57392, 63289]) >= 0) { return true; } // Already opened if ($container.hasClass('select2-container--open')) { return true; } $select.select2('open'); // Default search value var $search = $select2.dropdown.$search || $select2.selection.$search, query = $.inArray(e.which, [13, 40, 108]) < 0 ? String.fromCharCode(e.which) : ''; if (query !== '') { $search.val(query).trigger('keyup'); } }); // Format, placeholder $select.on('select2:open', function (e) { var $select = $(this), $select2 = $select.data('select2'), $dropdown = $select2.dropdown.$dropdown || $select2.selection.$dropdown, $search = $select2.dropdown.$search || $select2.selection.$search, data = $select.select2('data'); // Above dropdown if ($dropdown.hasClass('select2-dropdown--above')) { $dropdown.append($search.parents('.select2-search--dropdown').detach()); } // Placeholder $search.attr('placeholder', (data[0].text !== '' ? data[0].text : $select.data('placeholder'))); }); } 

 /* !important not needed with less */ .form-group { padding: 25px; } .form-group.above { position: absolute; bottom: 0; left: 0; right: 0; } .select2-container--open .select2-selection { box-shadow: none!important; } .select2-container--open .select2-selection .select2-selection__arrow { z-index: 9999; /* example */ } .select2-dropdown { /* .box-shadow(@form-control-focus-box-shadow); (from select2-boostrap */ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); /* border-color: @input-border-focus; */ border-color: #66afe9; border-top-width: 1px!important; border-top-style: solid!important; /* border-top-left-radius: @input-border-radius; */ border-top-left-radius: 4px!important; /* border-top-right-radius: @input-border-radius; */ border-top-right-radius: 4px!important; /* margin-top: -@input-height-base; */ margin-top: -34px!important; } .select2-dropdown .select2-search { padding: 0; } .select2-dropdown .select2-search .select2-search__field { /* !important not needed using less */ border-top: 0!important; border-left: 0!important; border-right: 0!important; border-radius: 0!important; /* padding: @padding-base-vertical @padding-base-horizontal; */ padding: 6px 12px; /* height: calc(@input-height-base - 1px); */ height: 33px; } .select2-dropdown.select2-dropdown--above { /* border-bottom: 1px solid @input-border-focus; */ border-bottom: 1px solid #66afe9!important; /* border-bottom-left-radius: @input-border-radius; */ border-bottom-left-radius: 4px!important; /* border-bottom-right-radius: @input-border-radius; */ border-bottom-right-radius: 4px!important; /* margin-top: @input-height-base; */ margin-top: 34px!important; } .select2-dropdown.select2-dropdown--above .select2-search .select2-search__field { /* border-top: 1px solid @input-border; */ border-top: 1px solid #66afe9!important; border-bottom: 0!important; } 

      
 Below example (click label to focus)   First choice Second choice Third choice Fourth choice Fifth choice Sixth choice Seventh choice Eighth choice Ninth choice  
 
 Above example (click label to focus)   First choice Second choice Third choice Fourth choice Fifth choice Sixth choice Seventh choice Eighth choice Ninth choice   

Answer 6

马特）

这项工作

     $（ '搜索镇平'）。选择2（{
        倍数：是的，
        占位符：“输入值”，
         allowClear：true，
         maximumSelectionLength：2，
        主题：“经典”
     }）。on（'select2：select'，function（e）{
         $（本）.VAL（[]）触发（ '变更'）;
         $（本）.VAL（[e.params.data.id]）的触发器（ “改变”）。
     }）;

Answer 7

 $.fn.select2.amd.require([ 'select2/selection/multiple', 'select2/selection/search', 'select2/dropdown', 'select2/dropdown/attachBody', 'select2/dropdown/closeOnSelect', 'select2/compat/containerCss', 'select2/utils' ], function (MultipleSelection, Search, Dropdown, AttachBody, CloseOnSelect, ContainerCss, Utils) { var SelectionAdapter = Utils.Decorate( MultipleSelection, Search ); var DropdownAdapter = Utils.Decorate( Utils.Decorate( Dropdown, CloseOnSelect ), AttachBody ); $('.inline-search').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: SelectionAdapter }); $('.dropdown-search').select2({ selectionAdapter: MultipleSelection }); $('.autocomplete').select2({ dropdownAdapter: DropdownAdapter, selectionAdapter: Utils.Decorate(SelectionAdapter, ContainerCss), containerCssClass: 'select2-autocomplete' }); }); 

 .select2-selection__choice__remove { display: none !important; } .select2-container--focus .select2-autocomplete .select2-selection__choice { display: none; } 

    
With an inline search box
  Alabama Alaska Arizona  
With the search box in the dropdown
  Alabama Alaska Arizona  
With the selection hidden when it is focused
  Alabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska ArizonaAlabama Alaska Arizona  

Answer 8

我只是用CSS格式化一个标准输入框，看起来像一个Select2（）下拉列表：

 input { width: 100%; padding: 7px 5px; margin: 1px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }