jQuery Chosen - 始終顯示佔位符

Question

我們的客戶想要在全部時間內顯示佔位符（在使用jQuery Chosen的多選中） - 即使在做出一個或多個選擇後。他們的目的是清楚地表明，可以根據需要制定更多的選擇。

我可以修改佔位符的文本：

jQuery(document).ready(function(){ 
    jQuery("#input_1_4").attr("data-placeholder", "Choose one or more"); 
}); 

但我沒有找到一個方法來修改行爲，使佔位符作出選擇後，仍然顯示。

環境是這樣我們有使用選擇;它是組件的一部分。我們僅限於添加額外的JavaScript或CSS來改變工作方式。

有沒有辦法讓佔位符顯示多選選擇字段，以鼓勵用戶做出更多選擇？

更新 這裏是一個工作示例： https://jsfiddle.net/holmegm/efhLepxs/25/

jQuery(document).ready(function(){ 
 
    jQuery("#input_1_4").attr("data-placeholder", "Choose one or more"); 
 
    jQuery("#input_1_4").chosen(); 
 
});

.chosen-container-multi .chosen-choices li.search-field input[type="text"] { 
 
    width: 25em !important; 
 
} 
 
.chosen-container-multi .chosen-choices { 
 
    width: 25em !important; 
 
    
 
}

<ul> 
 
<li id="field_1_4"><div class="ginput_container ginput_container_multiselect"><select multiple="multiple" data-placeholder="Click to select..." size="7" name="input_4[]" id="input_1_4" class="medium gfield_select" tabindex="6"><option value="what" >What</option><option value="sure" >Sure</option><option value="this" >This</option><option value="that" >That</option><option value="theOther" >The Other</option></select></div><div class="gfield_description">Please choose one or more types of assistance that you are looking for.</div></li></ul>

注意，佔位符文本存在任何選擇，才製成，然後是不目前後一個或多個選擇已經完成。目標是保持它的存在，而不僅僅是假設用戶已經知道如何使用這種控件的空白空間。

Answer 1

需要選擇初始化後設定data-placeholder屬性（或default_text在選擇術語）的值到所述search_field元件。

下面是做這件事：

jQuery(document).ready(function() { 
 
    jQuery("#input_1_4").attr("data-placeholder", "Choose one or more"); 
 
    jQuery("#input_1_4").on('chosen:ready', function(ev, args) { 
 
    var sender = args.chosen; 
 
    sender.search_field.attr('placeholder', sender.default_text); 
 
    }).chosen(); 
 
});

.chosen-container-multi .chosen-choices li.search-field input[type="text"] { 
 
    width: 25em !important; 
 
} 
 

 
.chosen-container-multi .chosen-choices { 
 
    width: 25em !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script> 
 
<ul> 
 
    <li id="field_1_4"> 
 
    <div class="ginput_container ginput_container_multiselect"><select multiple="multiple" data-placeholder="Click to select..." size="7" name="input_4[]" id="input_1_4" class="medium gfield_select" tabindex="6"><option value="what" >What</option><option value="sure" >Sure</option><option value="this" >This</option><option value="that" >That</option><option value="theOther" >The Other</option></select></div> 
 
    <div 
 
     class="gfield_description">Please choose one or more types of assistance that you are looking for.</div> 
 
    </li> 
 
</ul>

}）;