Создание новых тегов в теге 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, которая возвращает объект с идентификатором «» и «текст». В другом случае, если вы вернете undefined, параметр не будет создан.