javascript - dropdownparent - styling select2

Select2 comienza con el campo de entrada en lugar de desplegable (8)

En mi caso, quería que las selecciones del usuario del menú desplegable aparecieran en una lista debajo del menú desplegable, en lugar de funcionar como una lista desplegable normal. Así que esta solución alternativa funcionó para mí:

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

Por supuesto, eso no funcionará si desea que el elemento seleccionado permanezca seleccionado en el cuadro de entrada de Select2 como lo hace con una lista de selección múltiple select2 regular.

Yo uso la biblioteca js select2 . Esta es una captura de pantalla de lo que tengo ahora:
Comienzo:

Haga clic en el menú desplegable:

¿Ahora es posible tener un campo de entrada para comenzar y no directamente una lista desplegable? Sé que es posible porque puedes encontrarlo en el sitio de select2. Un ejemplo es esto:

Pero la documentación es muy breve. Esto es lo que tengo ahora:

<input type="text" name="questions[question1]" id="question1" class="question1" style="width:500px"/>

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

(Los datos se reciben de una llamada ajax)

Esto es posible en Select2 4.0.0 con los nuevos adaptadores de selección. Puede cambiar SingleSelection con MultipleSelection (incluidos los decoradores pertinentes) y debe comportarse como se espera.

$.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; }

De forma predeterminada, Select2 configurará el menú desplegable para tener la búsqueda (en lugar del contenedor de selección) que deberá anular si desea emular perfectamente una selección múltiple.

Implementación personalizada con estilo Bootstrap, simple pero funcional:

/* !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; }

~~La opción minimumInputLength: 1 de minimumInputLength: 1 puede ocultar el menú desplegable en foco / abrir ...~~

Actualización: limpieza del código, no abra el menú desplegable en el foco.

La única solución que se me ocurre es usar tanto multiple: true como maximumSelectionSize: 1 cuando se configura.

Por favor, mira mi ejemplo aquí: http://jsfiddle.net/DanEtchy/Lnf8j/

Lo que está viendo en realidad es un cuadro desplegable de selección múltiple o valor múltiple en ese ejemplo. No es un cuadro desplegable de un solo valor como el que está usando en su código. Según el sitio web de Select2, select2 detectará que está tratando de usar un cuadro de selección múltiple y aplicará automáticamente ese estilo en lugar del predeterminado (flecha desplegable, etc.).

Si de hecho necesita un cuadro desplegable de valor único, no hay una forma directa de mostrarlo con el formato de la selección múltiple para que se vea como un cuadro de entrada normal. Puede haber una manera de simularlo agregando o eliminando clases de CSS. Jugué un poco pero no pude encontrar uno.

Como no desea el formato, el cuadro de búsqueda o la capacidad de selección múltiple (supongo), probablemente no necesite usar la biblioteca select2.

Actualización: parece que no eres la primera persona que intenta hacer esto. Planean agregar esta característica, pero puede llevar un tiempo: https://github.com/ivaynberg/select2/issues/1345

Mate,)

este trabajo

$(''.search-town-flat'').select2({ multiple: true, placeholder: "Enter values", allowClear: true, maximumSelectionLength: 2, theme : "classic" }).on(''select2:select'', function (e) { $(this).val([]).trigger(''change''); $(this).val([e.params.data.id]).trigger("change"); });

Simplemente formateé un cuadro de entrada estándar con CSS para que parezca un menú desplegable Select2 ():

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

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