Select2 标记：在新标记后面添加自定义文本

Question

我正在使用 select2 tagging feature。有没有一种简单的方法可以在新标签后面添加自定义文本。我的意图是，用户知道 he/she 将添加标签。

结果应该是这样的，例如。在颜色名称的例子中，它可以在新标签后说“新颜色”：

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

select, pre {
  display: inline-block;
}

.js-example-tags {
  width: 256px;
}

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select class="js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select> <pre><== Type new tag into search and click enter</pre>

Answer 1

如果我理解你的逻辑，你可以试试这个：

$(".js-example-tags").select2({
  tags: true,
  createTag:newtag,
  matcher: matchCustom,
});

function newtag(params, data){
    var term = $.trim(params.term);
    if (term === '') {
      return null;
    }
      return {
      id: term,
      text: term + " (New color)",
      newTag: true // add additional parameters
    }
}

function matchCustom(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') {
      return data;
    }

    // Do not display the item if there is no 'text' property
    if (typeof data.text === 'undefined') {
      return null;
    }
    
   // Return `null` if the term should not be displayed
    return null;
}

select, pre {
  display: inline-block;
}

.js-example-tags {
  width: 256px;
}

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select class="js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>

</select> <pre><== Type new tag into search and click enter</pre>

Select2 标记：在新标记后面添加自定义文本

Select2 tagging: add custom text behind new tag

jquery

tagging

jquery-select2