0
select2オートコンプリートのプレースホルダを設定しましたが、入力プレースホルダからカーソルを離したときにもう表示されませんが、常に表示されます。私のコードをあなたと共有しました。あなたはそれから右クリックしたときにそれがどのように機能するかを正しく 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) {
\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>
それを修正する方法 – MaxZoom