Is select2 multi style the same as single select?

Question

Basically, I want the input actions to be displayed only on the display, when I click on the field I want the drop-down menu with the search field to be the same as a single one.

The layout (poorly done) below explains this better than I can.

Does Select2 have a built-in function, or is there an easy way to do this?

Answer 1

For those still looking for a solution, take a look at my violin.

I used a couple of scripts posted on this issue and combined them into 1

Not perfect, but it works.

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"; }