web-dev-qa-db-fra.com

Select2 commence par le champ de saisie au lieu du menu déroulant

J'utilise la bibliothèque js select2 . Ceci est une capture d'écran de ce que j'ai maintenant:
Début:
enter image description here
Cliquez sur le menu déroulant:
enter image description here

Maintenant, est-il possible d'avoir un champ de saisie pour commencer et pas directement une liste déroulante? Je sais que c'est possible parce que vous pouvez le trouver sur le site select2. Un exemple est le suivant: enter image description hereenter image description here

Mais la documentation est très brève. Voici ce que j'ai maintenant:

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

(Les données sont reçues d'un appel ajax)

javascriptjquerydrop-down-menuinputjquery-select2
30
nielsv

Ce que vous voyez est en réalité une liste déroulante à sélections multiples ou à valeurs multiples dans cet exemple. Ce n'est pas une liste déroulante à valeur unique comme celle que vous utilisez dans votre code. Selon le site Web Select2, select2 détectera que vous essayez d'utiliser une zone à sélection multiple et appliquera automatiquement ce style au lieu du style par défaut (flèche déroulante, etc.). 

Si vous avez en fait besoin d'une liste déroulante à une seule valeur, il n'existe aucun moyen direct de l'afficher avec le formatage de la sélection multiple, de sorte qu'elle ressemble à une zone de saisie normale. Il peut y avoir un moyen de le simuler en ajoutant ou en supprimant des classes CSS. J'ai joué un peu mais je n'ai pas pu en trouver un.

Étant donné que vous ne souhaitez pas utiliser le formatage, le champ de recherche ou la fonctionnalité de sélection multiple (je suppose), vous n'avez probablement pas besoin d'utiliser la bibliothèque select2. 

Mise à jour: Il semble que vous ne soyez pas la première personne à essayer de faire cela. Ils prévoient d’ajouter cette fonctionnalité, mais cela pourrait prendre un moment: https://github.com/ivaynberg/select2/issues/1345

28
KyleK

La seule solution que je pourrais trouver est d'utiliser à la fois multiple: true et maximumSelectionSize: 1 lors de la configuration.

S'il vous plaît voir mon exemple ici: http://jsfiddle.net/DanEtchy/Lnf8j/

24
Dan Echeverria

Cela est possible dans Select2 4.0.0 avec les nouveaux adaptateurs de sélection. Vous pouvez échanger la SingleSelection avec une MultipleSelection (y compris tous les décorateurs pertinents) et elle devrait se comporter comme prévu.

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

Par défaut, Select2 configurera le menu déroulant pour que la recherche (au lieu du conteneur de sélection) soit remplacée par une substitution si vous souhaitez émuler parfaitement une sélection multiple.

11
Kevin Brown

Au lieu de Select2 le meilleur choix serait selectize car Select2 semble mort

La utilisation est facile:

$('select').selectize(options);

Ici est le nombre d'exemples d'utilisation et de personnalisation de selectize

2
Eugen Konkov

Dans mon cas, je voulais que les sélections de l'utilisateur dans la liste déroulante apparaissent dans une liste située sous la liste déroulante, plutôt que de fonctionner comme une liste déroulante normale. Donc cette solution a fonctionné pour moi:

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

Bien sûr, cela ne fonctionnera pas si vous voulez que l'élément sélectionné reste sélectionné dans la zone de saisie de select2 comme dans une liste multisélectionner select2 classique.

1
Matt Browne

Implémentation personnalisée à l'aide du style Bootstrap, simple mais fonctionnelle:

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>

L'option minimumInputLength: 1 de Select2 peut masquer le menu déroulant sur le focus/ouvrir ...

Mise à jour: nettoyage du code, ne pas ouvrir la liste déroulante sur le focus.

1
Michal Sotolar

Mat,)

ce travail

 $ ('. search-town-flat'). select2 ({
 multiple: true, 
 espace réservé: "Entrer des valeurs", 
 allowClear: true, 
 maximumSelectionLength: 2, 
 theme : "classic" 
}). on ('select2: select', fonction (e) {
 $ (this) .val ([]). trigger ('change'); 
 $ (this ) .val ([e.params.data.id]). trigger ("change"); 
});
0
Vova