Magicsuggest modifie le texte de l'espace réservé

Question

Je travaille avec Magicsuggest depuis quelques jours et j'essaie de modifier le texte de remplacement pour que Magicsuggest agisse comme une sélection unique.

J'ai le premier :

HTML

<div style="padding:5px 10px;" data-bind="visible: availableOptions().length > 1">
   <div id="magicsuggest"></div>
</div>

JavaScript

magicOChange = $('#magicsuggest').magicSuggest({
     data: availableOptions,
     placeholder: function () {
              $('.ms-sel-ctn input').attr("placeholder", SelectedN);
     }
});

$(magicOChange).on('selectionchange', function (e, m, sel) {
     if (sel.length == 0) return;
     for (i = 0; i < availableOptions.length; i++) {
          if (typeof sel[0] != 'undefined')
              if (availableOptions[i].name == sel[0].name) {
                       SelectedN(sel[0].name);
                       SelectedN2(sel[0].name);
                       break;
              }
     }
     if (typeof sel[0] != 'undefined') {
         magicOChange.collapse();
         this.clear();
     }
});

Et j'essaie d'ajouter le second à l'intérieur d'une popup :

HTML

<div class="modal-body">
    <div class="row">
         <div data-bind="visible: availableOptions().length > 1">
               <div id="magicsuggestM"></div>
         </div>
    </div>
</div>

JavaScript

magicMChange = $('#magicsuggestM').magicSuggest({
     data: availableOptions,
     placeholder: function () {
              $('.ms-sel-ctn input').attr("placeholder", SelectedN2);
     }
});

$(magicMChange).on('selectionchange', function (e, m, sel) {
     if (sel.length == 0) return;
     for (i = 0; i < availableOptions.length; i++) {
          if (typeof sel[0] != 'undefined')
              if (availableOptions[i].name == sel[0].name) {
                       SelectedN2(sel[0].name);
                       break;
              }
     }
     if (typeof sel[0] != 'undefined') {
         magicMChange.collapse();
         this.clear();
     }
});

Mais il semble que lorsque j'essaie de modifier la valeur de la deuxième Magicsuggest (celle de la fenêtre popup), l'espace réservé de l'autre Magicsuggest est modifié et la valeur souhaitée reste inchangée. Existe-t-il un moyen de modifier la valeur d'un espace réservé sans affecter l'autre ?

Answer 1

Il tire l'espace réservé du premier élément dom disponible. Au niveau des placeholders, ajoutez l'id de chaque élément avant d'interroger le sélecteur. Ainsi, au lieu de :

$('.ms-sel-ctn input').attr("placeholder", SelectedN);

le changer en :

$('#magicsuggestv .ms-sel-ctn input').attr("placeholder", SelectedN);

et au lieu de :

$('.ms-sel-ctn input').attr("placeholder", SelectedN2);

le changer en :

$('#magicsuggestM .ms-sel-ctn input').attr("placeholder", SelectedN2);