0
Ich setze Platzhalter für meine select2 Autovervollständigung und als ich meinen Cursor vom Eingabeplatzhalter löste, erscheint er nicht mehr, aber ich möchte ihn immer sehen.Ich habe meinen Code mit dir geteilt vielleicht kann ich einen finden Art und Weise, wie es richtig Select2 Platzhalter erscheint nicht immer
$(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) {
\t if (!opt.id) {
\t \t return opt.text;
\t }
\t var optimage = $(opt.element).data('image');
\t if(!optimage){
\t \t return opt.text;
\t } else {
\t \t var $opt = $(
\t \t '<span class="userName"><img src="' + optimage + '" class="userPic" /> ' + $(opt.element).text() + '</span>'
\t \t);
\t \t return $opt;
\t }
};
});
.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: [email protected]; */
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>
zu beheben es funktioniert, wenn Sie direkt von darauf klicken – MaxZoom