erreur Select2 sur l'étiquette lorsque la valeur est pas la même que la valeur d'affichage

Question

Disons que j'ai cette boîte de sélection:

<select id="example" multiple="multiple" style="width: 300px"> 
    <option selected value="1">January</option> 
    <option value="2">February</option> 
    <option value="3">March</option> 
    <option value="4">April</option> 
    <option value="5">May</option> 
    <option value="6">June</option> 
    <option value="7">July</option> 
    <option value="8">August</option> 
    <option value="9">September</option> 
    <option value="10">October</option> 
    <option value="11">November</option> 
    <option value="12">December</option> 
</select> 

Pour communiquer avec beaucoup d'autres parties du site, la valeur ne peut être modifiée. Ceci est juste pour l'exemple de démonstration, le cas d'utilisation réel est quelque chose de plus compliqué et la valeur d'affichage doit être différente avec la valeur réelle du formulaire qui va être soumis.

Pour permettre la saisie semi-automatique et l'ajout d'une nouvelle étiquette, sélectionnez2 est utilisé.

$('#example').select2({ 
    placeholder: 'Select a month', 
    tags: true, 
    tokenSeparators: [',', ' '] 
}); 

JS fiddle for demo

Le problème est que lorsque vous tapez le nom complet du mois, comme « Janvier », puis appuyez sur l'espace, au lieu de sélectionner l'option existante « Janvier » (qui est ce que je m'y attendais), il crée juste une nouvelle étiquette avec la valeur January. Après quelques tests répétés, j'ai constaté que cela arrivait juste quand la valeur réelle n'est pas la même que la valeur d'affichage. Y a-t-il un moyen de garder les deux valeurs différentes mais de choisir l'option déjà existante?

Answer 1

Utiliser l'événement createTag en recherchant un match.

S'il n'y a pas de correspondance, et puisque vous ne voulez pas ajouter une nouvelle balise, retournez simplement null:

var options = $('#example option'); 

$('#example').select2({ 
    placeholder: 'Select a month', 
    tags: true, 
    tokenSeparators: [',', ' '], 
    createTag: function(params) {  
    var matchedVal = options.filter(function() { return $(this).html() === params.term; }).val();  
    return (matchedVal) ? { id: matchedVal, text: params.term } : null 
    } 
}); 

Démo: https://jsfiddle.net/2yu87gyf/

EDIT:

par votre commenter que vous voulez créer la balise si elle n'existe pas déjà - utilisez plutôt l'instruction return:

return (matchedVal) ? { id: matchedVal, text: params.term } : { id: params.term, text: params.term } 

Créer une balise inégalée démonstration: https://jsfiddle.net/2yu87gyf/1/

Answer 2

Essayez cette

option Supprimer balises comme il va créer de nouvelles étiquettes à la volée

$('#example').select2({ 
    placeholder: 'Select a month', 
    tokenSeparators: [',', ' '] 
});