Comment configurer la valeur par défaut sur une boîte de saisie avec select2 initialisé dessus

Comment puis-je régler la valeur par défaut sur une boîte de saisie avec select2? Voici mon HTML

<input type="text" id="itemId0" value="Item no. 1">

Et mon javascript:

  $("#itemId0").select2({ placeholder: 'Select a product', formatResult: productFormatResult, formatSelection: productFormatSelection, dropdownClass: 'bigdrop', escapeMarkup: function(m) { return m; }, minimumInputLength:1, ajax: { url: '/api/productSearch', dataType: 'json', data: function(term, page) { return { q: term }; }, results: function(data, page) { return {results:data}; } } }); function productFormatResult(product) { var html = "<table><tr>"; html += "<td>"; html += product.itemName ; html += "</td></tr></table>"; return html; } function productFormatSelection(product) { var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>"; return selected + product.itemName; }

Voici le problème: si je n'initialise pas ma boîte de saisie dans une case select2, je peux afficher la valeur par défaut de ma boîte de saisie qui est «Article n ° 1», 1er Mais lorsque je l'initialise avec select2 eg. $("#itemId0").select2({code here}); Je ne peux pas afficher la valeur par défaut de ma zone de texte. .

Quelqu'un sait comment puis-je afficher la valeur par défaut?

Vous devez utiliser la méthode initSelection comme décrit dans la documentation de Select2.

De la documentation :

Appelé lorsque Select2 est créé pour permettre à l'utilisateur d'initialiser la sélection en fonction de la valeur de l'élément auquel select2 est attaché.

Dans votre cas, regardez l'exemple Loading Remote Data car il montre comment l'intégrer aux demandes AJAX.

J'espère que ça aide.

Anciennes sélections initiales avec initSelection

Dans le passé, Select2 exigeait une option appelée initSelection qui a été définie chaque fois qu'une source de données personnalisée était utilisée, ce qui permet de déterminer la sélection initiale du composant. Cela a été remplacé par la méthode actuelle sur l'adaptateur de données.

 { initSelection : function (element, callback) { var data = []; $(element.val()).each(function () { data.push({id: this, text: this}); }); callback(data); } }

Vous pouvez également utiliser la valeur définie.

Vous devriez appeler directement .val sur l'élément sous-jacent à la place. Si vous aviez besoin du second paramètre (triggerChange), vous devez également appeler .trigger ("change") sur l'élément.

 $("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");

Refs:

Si vous avez un élément de saisie, déclarez-le comme suit. N'oubliez pas de remplir le champ de valeur également.

 <input type="hidden" name="player" id="player" data-init-text="bla bla" value="bla bla" >

Ecrire une fonction initSelection

  initSelection : function (element, callback) { var elementText = $(element).attr('data-init-text'); callback({"text":elementText,"id":elementText}); }

Assurez-vous que cet appel a la même paire de valeur de clé que celui renvoyé par l'appel ajax.

 callback({"text":elementText,"id":elementText});

J'ai remarqué que garder le champ de valeur vide gardera l'entrée vide par défaut, alors n'oubliez pas de le remplir aussi.

La méthode initSelection ne peut pas avoir un attribut de valeur vide pour fonctionner correctement.

C'était mon problème.

J'espère que cela aidera quelqu'un.

Vous pouvez facilement modifier la valeur de votre entrée sélectionnée en mettant les identifiants de votre option sélectionnée dans l'attribut de données de votre entrée sélectionnée. Et puis en javascript

 var select = $('.select'); var data = $(select).data('val'); $(select).val(data);

Et après cela initialiser select2 sur votre entrée sélectionnée

 $(select).select2();

Voici le violon https://jsfiddle.net/zeeshanu/ozxo0wye/

Cela fonctionne pour moi: 'Ajouter une valeur par défaut à la tête du tableau'

 data.unshift({'id':-1, 'name':'xxx'}); $('#id_xxx).select2({ placeholder: '--- SELECT ---', data: data, allowClear: true, width: '100%' });

Cependant, le docteur officiel dit:

 You can set default options by calling $.fn.select2.defaults.set("key", "value").

Cependant, il n'y a pas d'exemple.

Vous n'avez pas besoin d'ajax ou json, il vous suffit d'insérer SELETED dans votre OPTION et SELECT2 affichera la valeur d'init.