5

我有一个输入（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);
        }
    });

如果键入的文本不存在，是否可以创建新标签？最初我认为这可以通过用空格分隔来完成，但是有些项目（供应商名称）中会有空格，所以这是行不通的。

我认为当没有找到匹配项时，用户需要通过按下可能出现在下拉框中的按钮以某种方式“创建”标签，但我不知道该怎么做。

我怎样才能允许用户创建其中可能有空格的新标签，并且仍然能够继续添加更多标签，现有的或其他的？

4

1 回答 1

8

是的，你可以做到。文档中有一个示例。看看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，则不会创建选项。

于 2013-11-11T10:27:32.423 回答