javascript - Select2 占位符并不总是出现

Question

我为我的 select2 自动完成设置了占位符，当我将光标从输入中移开时，占位符不再出现，但我想始终显示它。我与您分享了我的代码，也许我可以找到正确修复它的方法

  $(function(){
 


$("#select2-single-box").select2({
  placeholder:"Type a country",
 templateResult: addUserPic,
 templateSelection: addUserPic,
    minimumInputLength: 2,
   allowClear:true,

}).on('select2:select', function (e) {
        $(this).val([]).trigger('change');
        $(this).val([e.params.data.id]).trigger("change");
    });


function addUserPic (opt) {
	if (!opt.id) {
		return opt.text;
	}               
	var optimage = $(opt.element).data('image'); 
	if(!optimage){
		return opt.text;
	} else {
		var $opt = $(
		'<span class="userName"><img src="' + optimage + '" class="userPic" /> ' + $(opt.element).text() + '</span>'
		);
		return $opt;
	}
};

});

 

.select2-results__message{
  display:none;
}

.form-group {
  padding: 25px;
}
select{
  width:45%;
  padding:12px;
  cursor:text;
  border:1px solid #aaa;
}

.select2-container--open .select2-selection {
    box-shadow: none!important;
}

.select2-container--open .select2-selection .select2-selection__arrow {
    z-index: 9999; /* example */
  display:none;
}

.select2-dropdown {

  
  /* margin-top: -@input-height-base; */
  margin-top: -34px!important;
}

.select2-dropdown .select2-search {
    padding: 0;
}
.select2-selection__arrow{
  display:none;
}
.select2-dropdown .select2-search .select2-search__field {

  
  /* padding: @padding-base-vertical @padding-base-horizontal; */
  padding: 6px 12px;
  
  /* height: calc(@input-height-base - 1px); */
  height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__clear{
  display:none;
}
.select2-container--open .select2-dropdown--below{
  border:0px solid transparent;
}
.select2-container--default .select2-selection--single{
  border-radius:0;
  height:34px;
  cursor:text;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

<div class="form-group">
 <select class="form-control" id="select2-single-box" onChange="window.document.location.href=this.options[this.selectedIndex].value;">
    <option></option>
                            <option value="http://www.google.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Belgium-Flag-icon.png">Belgium</option>
                            <option value="http://www.yahoo.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Canada-Flag-icon.png">Canada</option>
                            <option value="http://www.bing.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Hong-Kong-Flag-icon.png">Hong Kong</option>
                            <option value="http://www.yandex.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Aruba-icon.png">Aruba</option>
                            <option value="http://www.php.net" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Montenegro-Flag-icon.png">Montenegro</option>
                            <option value="http://www.asp.net" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Denmark-Flag-icon.png">Denmark</option>
                            <option value="http://www.microsoft.net" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Guadeloupe-icon.png" >Guadeloupe</option>
                            <option value="http://www.microsoft.net" data-image="http://icons.iconarchive.com/icons/icons-land/vista-flags/16/United-States-Flag-1-icon.png">United-States ABD</option>
                        </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Answer 1

$(function(){

  $("#select2-single-box").select2({
  	placeholder : "Type a country",
 	templateResult: addUserPic,
 	templateSelection: addUserPic,
    minimumInputLength: 2,
   	allowClear:true
  }).on('select2:select', function (e) {
    $(this).val([]).trigger('change');
    $(this).val([e.params.data.id]).trigger("change");
  }).on('select2:open', function(e){
     $('.select2-search__field').attr('placeholder','Type a country');
  });

  function addUserPic (opt) {
    if (!opt.id) {
      return opt.text;
    }               
    var optimage = $(opt.element).data('image'); 
    if(!optimage){
      return opt.text;
    } else {
      var $opt = $(
        '<span class="userName"><img src="' + optimage + '" class="userPic" /> ' + $(opt.element).text() + '</span>'
      );
      return $opt;
    }
  };
});

.select2-results__message{
  display:none;
}

.form-group {
  padding: 25px;
}
select{
  width:45%;
  padding:12px;
  cursor:text;
  border:1px solid #aaa;
}

.select2-container--open .select2-selection {
    box-shadow: none!important;
}

.select2-container--open .select2-selection .select2-selection__arrow {
    z-index: 9999; /* example */
  display:none;
}

.select2-dropdown {

  
  /* margin-top: -@input-height-base; */
  margin-top: -34px!important;
}

.select2-dropdown .select2-search {
    padding: 0;
}
.select2-selection__arrow{
  display:none;
}
.select2-dropdown .select2-search .select2-search__field {

  
  /* padding: @padding-base-vertical @padding-base-horizontal; */
  padding: 6px 12px;
  
  /* height: calc(@input-height-base - 1px); */
  height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__clear{
  display:none;
}
.select2-container--open .select2-dropdown--below{
  border:0px solid transparent;
}
.select2-container--default .select2-selection--single{
  border-radius:0;
  height:34px;
  cursor:text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<div class="form-group">
 <select class="form-control" id="select2-single-box" onChange="window.document.location.href=this.options[this.selectedIndex].value;" >
    <option></option>
    <option value="http://www.google.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Belgium-Flag-icon.png">Belgium</option>
    <option value="http://www.yahoo.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Canada-Flag-icon.png">Canada</option>
    <option value="http://www.bing.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Hong-Kong-Flag-icon.png">Hong Kong</option>
    <option value="http://www.yandex.com" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Aruba-icon.png">Aruba</option>
    <option value="http://www.php.net" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Montenegro-Flag-icon.png">Montenegro</option>
    <option value="http://www.asp.net" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Denmark-Flag-icon.png">Denmark</option>
    <option value="http://www.microsoft.net" data-image="http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/16/Guadeloupe-icon.png" >Guadeloupe</option>
    <option value="http://www.microsoft.net" data-image="http://icons.iconarchive.com/icons/icons-land/vista-flags/16/United-States-Flag-1-icon.png">United-States ABD</option>
  </select>
</div>