javascript - Magicsuggest 更改占位符文本

Question

我使用 Magicsuggest 已经有几天了，我正在尝试更改占位符文本，以便 Magicsuggest 的行为就像单选一样。

我有第一个:

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

我正在尝试在弹出窗口中添加第二个:

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

但似乎当我尝试更改第二个 Magicsuggest(弹出窗口中的那个)的值时，它会更改另一个 Magicsuggest 的占位符，而所需的占位符保持不变。有没有一种方法可以更改一个占位符的值而不影响另一个占位符？

Answer 1

它从第一个可用的 dom 元素中提取占位符。在占位符处，在查询选择器之前添加每个元素的 id。所以，而不是:

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

将其更改为:

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

而不是:

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

将其更改为:

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