Select2: 使用代码动态添加新标签

Question

我正在使用Select2进行标签设置，我已经设置好用户可以添加新标签。我面临的问题是验证用户输入并将经过处理的标签添加到选择中。

更具体地说，当用户在标签中输入空格时，我使用formatNoMatches显示js链接以清理标签，然后通过编程方式添加标签。这段代码似乎没有错误，但是当调用sanitize时，输入的所有选择都被清除了。

有任何线索告诉我哪里出错了吗？

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>" }
});

- webber

---

有人找出在select2 4.0.x中如何做到这一点了吗？ - Matt Powell

Answer 1

只有这种解决方案对我有效：

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');

- Roman Yakoviv

Answer 2

你可以设置新的值（如果是标签，可以传递数组），并触发“change”事件。

var field = $('SOME_SELECTOR');

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

关于事件： https://select2.github.io/options.html#events

- Athlan

Answer 3

在进行进一步的研究后，我意识到应该将新项目设置为“数据”属性而不是值。

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

- webber