2017-04-19 144 views
2

我一直在使用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

它從第一個可用的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);