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

Inicio:

Select2 empezar con un campo de entrada en lugar de la lista desplegable

Haga clic en la lista desplegable:

Select2 empezar con un campo de entrada en lugar de la lista desplegable

Ahora es posible tener un campo de entrada para comenzar, y no directamente un dropdownlist? Sé que es posible porque usted lo puede encontrar en la select2 sitio. Un ejemplo es este:
Select2 empezar con un campo de entrada en lugar de la lista desplegable
Select2 empezar con un campo de entrada en lugar de la lista desplegable

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

(Se reciben los datos de una llamada ajax)

InformationsquelleAutor nielsv | 2013-11-26

10 Comentarios

  1. 28

    Lo que estamos viendo es en realidad una selección múltiple o multi-valor en el cuadro de lista desplegable en el ejemplo. No es un valor único cuadro desplegable como el que usted está utilizando en su código. Por el Select2 sitio web, select2 detectará que usted está tratando de utilizar un multi-cuadro seleccionar y aplicar automáticamente ese estilo en lugar de la predeterminada (flecha desplegable, etc.).

    Si en realidad necesita un valor único cuadro de lista desplegable, no hay una manera directa de hacer pantalla con el formato de selección múltiple, por lo que parece regular de la caja de entrada. Puede haber una forma de fingir por agregar o quitar clases CSS. He jugado un poco, pero no podía encontrar.

    Ya que no desea el formato, el cuadro de búsqueda, o la de selección múltiple capacidad (estoy suponiendo) que, probablemente, no es necesario utilizar el select2 de la biblioteca.

    Actualización: parece Que no eres la primera persona a tratar de hacer esto. El plan para añadir esta característica, pero puede ser un tiempo:
    https://github.com/ivaynberg/select2/issues/1345

    • Gracias por la perfecta explicación! Hacer yo tal vez conozca a otra buena biblioteca que puedo utilizar para autosuggesting?
    • Tienes un montón de bienvenida. No estoy seguro de lo que quieres decir por autosuggesting. Creo que te refieres a algo como autocompletar. Como una búsqueda en google por ejemplo. Si es así, jQuery UI tiene un muy fácil utilizar la característica que va a trabajar con ajax. jqueryui.com/autocomplete
  2. 27

    La única solución que se me ocurrió es el uso del multiple: true y maximumSelectionSize: 1 de configuración.

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

    • El estilo no es lo ideal, pero esto funciona. El nombre de la opción fue cambiado a maximumSelectionLength (pero no aparece en la documentación para la versión más reciente, por alguna razón).
    • Yo también creo que esta solución no es ideal, pero puede ayudar en mi caso. Gracias por compartir tu comentario!
  3. 11

    Esto es posible en Select2 4.0.0 con la nueva selección de adaptadores. Usted puede cambiar el SingleSelection con un MultipleSelection (incluidas las de los decoradores) y debe comportarse como se espera.

    JS:

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

    CSS:

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

    HTML:

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

    Por defecto, Select2 se configure el menú desplegable para hacer que la búsqueda (en lugar de la selección contenedor) que usted tendrá que reemplazar si desea emulan a la perfección una selección múltiple.

    • Gracias por este Kevin. Si queríamos eliminar la selección__opción, de modo que no hay más espacio para escribir, recomendaría ocultar que la clase en el evento open (y mostrar en el evento de cierre)? Esto sería aún más cerca actuando como un autocompletar.
    • Acabo de añadir un ejemplo de cómo esto puede ser hecho sólo con CSS y containerCssClass el uso de las nuevas focus estado añadió en 4.0.1-rc.1.
  4. 1

    En mi caso, yo quería las selecciones del usuario de la lista desplegable que aparece en una lista debajo de la lista desplegable, en lugar de trabajar como una lista desplegable. Así que esta solución 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 que no funcionará si desea que el elemento seleccionado a permanecer seleccionado en select2 del cuadro de entrada como se hace con un regular select2 multiselect lista.

  5. 1

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

    JS:

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

    CSS:

    /* !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: [email protected]; */
    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;
    }

    HTML:

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

    Select2 del minimumInputLength: 1 opción puede ocultar el menú desplegable en foco/abrir…

    Actualización: limpieza de Código, no abra el desplegable de selección.

  6. 0

    Matt,)

    este trabajo

     $('.la búsqueda de-ciudad-plana').select2({ 
    varios: true, 
    marcador de posición: "Introduzca los valores", 
    allowClear: true, 
    maximumSelectionLength: 2, 
    tema : "clásico" 
    }).en('select2:seleccione', function (e) { 
    $(this).val([]).trigger('cambio'); 
    $(this).val([e.params.de datos.id]).trigger("cambio"); 
    }); 
    
  7. 0

    JS:

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

    CSS:

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

    HTML:

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

    • Por favor, incluya una explicación a su respuesta
  8. 0

    Utilizar estas propiedades

    $('#placeSelect').select2({
    width: '100%',
    allowClear: true,
    multiple: true,
    maximumSelectionSize: 1,   
    });

    acaba de llamar a esta función en el evento onchange del desplegable

    function ResentForMe(){
    var _text=$('.select2-selection__rendered li:first-child').attr('title');
    $('.select2-selection__rendered li:first-child').remove();
    $('.select2-search__field').val(_text);
    $('.select2-search__field').css('width','100%');
    }

    Nota: Retire las «Múltiples» atributo de seleccionar

  9. -1

    Simplemente he formateado un estándar de la caja de entrada con CSS para que parezca un Select2() desplegable:

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

Dejar respuesta

Please enter your comment!
Please enter your name here