Magicsuggest更改占位符文本

时间:2017-04-19 16:40:51

标签: javascript jquery html magicsuggest

我已经和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(弹出窗口中的那个)的值时,它会改变另一个占位符,并且所需的占位符保持不变。有没有办法在不影响另一个占位符的情况下更改一个占位符的值?

1 个答案:

答案 0 :(得分: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);