在Select2標簽textarea中創建新標簽

Question

我有一個輸入（textarea），其中應用了Select2的標簽。 因此，當用戶鍵入我的數據庫中存在的項目的名稱時，它會顯示匹配項的列表，用戶可以選擇一個並創建標記。

到目前為止，我的代碼是基本標記功能：

$('#usualSuppliers').select2({
        placeholder: "Usual suppliers...",
        minimumInputLength: 1,
        multiple: true,
        id: function(e) {
            return e.id + ":" + e.name;
        },
        ajax: {
            url: ROOT + 'Ajax',
            dataType: 'json',
            type: 'POST',
            data: function(term, page) {

                return {
                    call: 'Record->supplierHelper',
                    q: term,
                    page_limit: 10
                };
            },
            results: function(data, page) {
                return {
                    results: data.suppliers
                };
            }
        },
        formatResult: formatResult,
        formatSelection: formatSelection,
        initSelection: function(element, callback) {
            var data = [];
            $(element.val().split(",")).each(function(i) {
                var item = this.split(':');
                data.push({
                    id: item[0],
                    title: item[1]
                });
            });
            //$(element).val('');
            callback(data);
        }
    });

如果鍵入的文本不存在，是否有辦法創建新標記？ 最初我認為這可以通過用空格分隔來完成一些工作，但是有些項目（供應商名稱）會有空格，所以這樣就行不通了。

我認為當沒有找到匹配時，用戶需要通過按下可能出現在下拉框中的按鈕以某種方式“創建”標簽，但我不知道如何做到這一點。

如何允許用戶創建可能包含空格的新標簽，並且仍然可以繼續添加更多標簽，現有或其他？

Answer 1

是的，你可以做到。 文檔中有一個例子。 請看http://ivaynberg.github.io/select2/#events

$("#e11_2").select2({
  createSearchChoice: function(term, data) { 

   if ($(data).filter( function() { return this.text.localeCompare(term)===0;   
         }).length===0) {
     return {id:term, text:term};
   } 

  },
  multiple: true,
  data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

你必須創建一個像createSearchChoice這樣的函數，它返回一個帶有'id'和'text'的對象。 在其他情況下，如果您返回undefined，則不會創建選項。