动态创建选项

除了预填充的选项菜单外，Select2 还可以根据用户在搜索框中的文本输入动态创建新选项。这个功能被称为“标签(tagging)”。要启用标签功能，请设置tags选项为true:

<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

$(".js-example-tags").select2({
  tags: true
});

请注意，当启用标签功能时，用户可以从预先存在的选项中选择，或者通过选择第一个选项来创建一个新选项（即到目前为止用户已在搜索框中键入的内容）。

多值选择框中的标签功能

标签功能也可用于多值选择框。在下面的示例中，我们对一个也启用了multiple="multiple"属性的 Select2 控件设置了tags: true启用：

<select class="form-control" multiple="multiple">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

尝试输入一个下拉列表中没有的值 - 您可以将其作为新选项添加！

自动分词生成标签

Select2 支持在用户向搜索框输入内容时自动添加选项的功能。请尝试在下方的搜索框中输入内容并输入空格或逗号。

分词时应使用的分隔符可以通过设置tokenSeparators选项手动设置这些文件要使用的前缀。

自定义标签创建

标签属性

可以通过定义一个createTag回调函数：

$('select').select2({
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
      id: term,
      text: term,
      newTag: true // add additional parameters
    }
  }
});

限制标签创建

通过对createTag添加一些逻辑以返回null如果输入了无效值：

$('select').select2({
  createTag: function (params) {
    // Don't offset to create a tag if there is no @ symbol
    if (params.term.indexOf('@') === -1) {
      // Return null to disable tag creation
      return null;
    }

    return {
      id: params.term,
      text: params.term
    }
  }
});

自定义标签在下拉菜单中的位置

可以通过定义一个insertTag回调函数：

$('select').select2({
  insertTag: function (data, tag) {
    // Insert the tag at the end of the results
    data.push(tag);
  }
});