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>