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>

}）;