SELECT2は

Question

を呼び出します。ここ

3つのSELECT2インスタンスの例である：AJAXとAJAXせずにAjaxで

1. <select>タグ（素晴らしい作品）
2. <input>タグ（素晴らしい作品）
3. <input>タグ（これは問題のあるもの）

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 
 

 
$(".select2-no-ajax").select2({ 
 
    data: data 
 
}) 
 

 
$(".select2-ajax").select2({ 
 
    ajax: { 
 
    url: "https://api.github.com/search/repositories", 
 
    dataType: 'json', 
 
    delay: 250, 
 
    data: function (params) { 
 
     return { 
 
     q: params.term, 
 
     page: params.page 
 
     }; 
 
    }, 
 
    processResults: function (data, params) { 
 
     params.page = params.page || 1; 
 

 
     return { 
 
     results: data.items, 
 
     pagination: { 
 
      more: (params.page * 30) < data.total_count 
 
     } 
 
     }; 
 
    }, 
 
    cache: true 
 
    }, 
 
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
 
    minimumInputLength: 1, 
 
    templateResult: formatRepo, // omitted for brevity, see the source of this page 
 
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page 
 
}); 
 

 

 
/*************** Functions taken from select2 source ****************/ 
 

 
function formatRepo (repo) { 
 
    if (repo.loading) return repo.text; 
 

 
    var markup = "<div class='select2-result-repository clearfix'>" + 
 
     "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" + 
 
     "<div class='select2-result-repository__meta'>" + 
 
     "<div class='select2-result-repository__title'>" + repo.full_name + "</div>"; 
 

 
    if (repo.description) { 
 
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>"; 
 
    } 
 

 
    markup += "<div class='select2-result-repository__statistics'>" + 
 
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" + 
 
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" + 
 
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" + 
 
    "</div>" + 
 
    "</div></div>"; 
 

 
    return markup; 
 
} 
 

 
function formatRepoSelection (repo) { 
 
    return repo.full_name || repo.text; 
 
}

input, select { 
 
    width: 100%; 
 
} 
 
div.good { 
 
    color: green; 
 
} 
 
div.bad { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://select2.github.io/css/s2-docs.css"> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 
    
 

 
<div class="good">This one works great (select tag with ajax):</div> 
 
<select class="select2-ajax"> 
 
    <option value="3620194" selected="selected">select2/select2</option> 
 
</select> 
 

 
<br /><br /> 
 
<div class="good">This one works great (regular input):</div> 
 
<input class="select2-no-ajax" /> 
 

 
<br /><br /> 
 
<div class="bad">This on is problematic (input with ajax) - ajax request never called:</div> 
 
<input class="select2-ajax" />

select2のバグですか？オプションに何かを追加する必要がありますか？
最新バージョンのselect2（v4.0.2）を使用しています

Answer 1

Select2 4.0では、入力タグとの互換性は廃止されました。代わりに<select>タグを使用することをお勧めします。詳細については、以下のリンクも参照してください。

https://select2.github.io/options.html#core-options