javascript - dropdownparent - styling select2

Select2 comienza con el campo de entrada en lugar de desplegable

Question

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)

Answer 1

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.

Answer 2

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

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<p>With an inline search box</p>

<select style="width: 200px" class="inline-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the search box in the dropdown</p>

<select style="width: 200px" class="dropdown-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the selection hidden when it is focused</p>

<select style="width: 200px" class="autocomplete">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

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.

Answer 3

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<div class="form-group">
  <label class="control-label">Below example (click label to focus)</label>
  <select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="1">
    <option></option>
    <option value="1">First choice</option>
    <option value="2">Second choice</option>
    <option value="3">Third choice</option>
    <option value="4">Fourth choice</option>
    <option value="5">Fifth choice</option>
    <option value="6">Sixth choice</option>
    <option value="7">Seventh choice</option>
    <option value="8">Eighth choice</option>
    <option value="9">Ninth choice</option>
  </select>
</div>
<div class="form-group above">
  <label class="control-label">Above example (click label to focus)</label>
  <select class="form-control" id="select2-single-box" name="select2-single-box" data-placeholder="Pick your choice" data-tabindex="2">
    <option></option>
    <option value="1">First choice</option>
    <option value="2">Second choice</option>
    <option value="3">Third choice</option>
    <option value="4">Fourth choice</option>
    <option value="5">Fifth choice</option>
    <option value="6">Sixth choice</option>
    <option value="7">Seventh choice</option>
    <option value="8">Eighth choice</option>
    <option value="9">Ninth choice</option>
  </select>
</div>

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.

Answer 4

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/

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<p>With an inline search box</p>

<select style="width: 200px" class="inline-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the search box in the dropdown</p>

<select style="width: 200px" class="dropdown-search">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<p>With the selection hidden when it is focused</p>

<select style="width: 200px" class="autocomplete">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option><option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>