$(function (){
    $user = $(".user");

    $user.select2({
        language: 'zh-TW',
        width: '100%',
        // 最多字元限制
        maximumInputLength: 10,
        // 最少字元才觸發尋找, 0 不指定
        minimumInputLength: 0,
        // 當找不到可以使用輸入的文字
        tags: true,
        data: [
            { id: 1, text: "Blue" },
            { id: 2, text: "David"},
            { id: 3, text: "Judy" },
            { id: 4, text: "Kate" },
            { id: 5, text: "John" }
        ],
    });

    // 取得預選的遠端資料
    $.get({
        url: 'https://next.json-generator.com/api/json/get/NkjWQg4bS',
        success: function (obj){
            // obj = [{"id": 3,"text": "Judy"},{"id": 4, "text": "Kate"},{"id": 100, "text": "Jason"}]
            $.each(obj, function(index, ele) {
                // Jason 因為原本資料不存在，所以會被加入，其他則僅是替換
                var option = new Option(ele.text, ele.id, true, true);
                $user.append(option).trigger('change');
            });
        }
    }, "json")
})