這是整合Select2的筆記
主要使用的是CDN

CSS

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

JS

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<script src="https://select2.github.io/select2-bootstrap-theme/js/anchor.min.js"></script>

JS

//使用bootstarp的style
$.fn.select2.defaults.set("theme", "bootstrap");

//綁定元件
$('.select2-single, .select2-multiple').select2(
    {

        width: 'auto',
        dropdownAutoWidth: true,
        selectOnClose: true
    }
);
//處理無法focus的問題
$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
});

解決無法Focus

$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
});