CODEWITHSUNDEEP
javascriptjqueryhtmlmagicsuggest
LAffair
LAffair

Reputation: 1998

Magicsuggest change placeholder text

I've been working with Magicsuggest for a couple of days and I'm trying to change the placeholder text so the Magicsuggest acts like single selection.

I have the first one:

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

And I'm trying to add the second one inside a 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();
     }
});

But it seems that when I'm trying to change the value for the second Magicsuggest (the one from the popup) it changes the placeholder of the other one and the desired one remains the same. Is there a way to change the value for one placeholder without affecting the other one?

Upvotes: 2

Views: 854

Answers (1)

ManoCarayannis
ManoCarayannis

Reputation: 821

It pulls the placeholder from the first available dom element. At the placeholders, add the id of each element before querying the selector. So, instead of:

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

change it to:

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

and instead of:

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

change it to:

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

Upvotes: 2

Related Questions