Chọn2: thêm thẻ mới động bằng mã

Question

Tôi đang sử dụng select2 để gắn thẻ và tôi đã thiết lập thẻ sao cho người dùng cũng có thể thêm thẻ mới. Vấn đề mà tôi đang xử lý là xác thực mục nhập của người dùng và thêm thẻ được sanitized vào lựa chọn.

Để cụ thể hơn, khi người dùng nhập dấu cách vào thẻ, tôi sử dụng định dạngKhông có hàng để hiển thị liên kết js để vệ sinh thẻ và sau đó thêm thẻ theo chương trình. Mã này dường như chạy mà không có lỗi nhưng khi khử trùng được gọi là tất cả các lựa chọn của đầu vào sẽ bị xóa.

Bất kỳ manh mối nào mà tôi có thể gặp sự cố?

var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}]; 
function format(item) { return item.tag; } 

function sanitize(a){ 

    $("#select").select2('val',[{ 
     id: -1, 
     tag: a 
     }]); 

     console.log(a); 
}; 

$("#select").select2({ 
    tags: true, 
    // tokenSeparators: [",", " "], 
    createSearchChoice: function(term, data) { 
    return term.indexOf(' ') >= 0 ? null : 
    { 
     id: term, 
     tag: term 
     }; 
    }, 
    multiple: true, 
    data:{ results: data, text: function(item) { return item.tag; } }, formatSelection: format, formatResult: format, 
    formatNoMatches: function(term) { return "\"" + term + "\" <b>Is Invalid.</b> <a onclick=\"sanitize('"+ term +"')\">Clear Invalid Charecters</a>" } 
}); 

Answer 1

Sau khi hack vào nó, tôi nhận ra rằng tôi nên đặt mục mới thành thuộc tính "dữ liệu" và không có giá trị.

var newList = $.merge($('#select').select2('data'), [{ 
     id: -1, 
     tag: a 
     }]); 
$("#select").select2('data', newList) 

Answer 2

Bạn có thể đặt giá trị mới (nếu thẻ bạn có thể chuyển mảng) và kích hoạt sự kiện 'thay đổi'.

var field = $('SOME_SELECTOR'); 

field.val(['a1', 'a2', 'a3']) // maybe you need merge here 
field.trigger('change') 

Về sự kiện: https://select2.github.io/options.html#events

Answer 3

Chỉ giải pháp này làm việc cho tôi:

function convertObjectToSelectOptions(obj){ 
    var htmlTags = ''; 
    for (var tag in obj){ 
     htmlTags += '<option value="'+tag+'" selected="selected">'+obj[tag]+'</option>'; 
    } 
    return htmlTags; 
} 
var tags = {'1':'dynamic tag 1', '2':'dynamic tag 2'}; //merge with old if you need 
$('#my-select2').html(convertObjectToSelectOptions(tags)).trigger('change');