Select2下拉列表但允许用户使用新值？

Question

我想要一个带有一组值的下拉列表,但也允许用户"选择"那里未列出的新值.

如果你在模式中使用它,我看到select2支持这个tokens,但有没有办法在没有令牌的情况下做到这一点？

Answer 1

@fmpwizard提供的优秀答案适用于Select2 3.5.2及更低版本,但它不适用于4.0.0.

从很早就开始(但可能不早于这个问题),Select2支持"标记":如果允许,用户可以添加自己的值.这可以通过tags选项启用,您可以在文档中使用示例.

$("select").select2({
  tags: true
});

默认情况下,这将创建一个与他们输入的搜索词具有相同文本的选项.如果要以特殊方式标记它,可以修改所使用的对象,或者在选择对象后远程创建对象.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

除了作为通过select2:select事件传入的对象上的易于标记的标记之外,额外属性还允许您在结果中稍微不同地呈现选项.因此,如果您希望通过在其旁边添加" (新) " 来直观地表明它是一个新选项的事实,您可以执行类似这样的操作.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  templateResult: function (data) {
    var $result = $("<span></span>");

    $result.text(data.text);

    if (data.newOption) {
      $result.append(" <em>(new)</em>");
    }

    return $result;
  }
});

Answer 2

对于版本4+,请查看Kevin Brown的以下答案

在Select2 3.5.2及更低版本中,您可以使用以下内容:

$(selector).select2({
  minimumInputLength:1,
  "ajax": {
    data:function (term, page) {
      return { term:term, page:page };
    },
    dataType:"json",
    quietMillis:100,
    results: function (data, page) {
      return {results: data.results};
    },
    "url": url
  },
  id: function(object) {
    return object.text;
  },
  //Allow manually entered text in drop down.
  createSearchChoice:function(term, data) {
    if ( $(data).filter( function() {
      return this.text.localeCompare(term)===0;
    }).length===0) {
      return {id:term, text:term};
    }
  },
});

(取自select2邮件列表中的答案,但现在找不到链接)

Answer 3

只是为了保持代码的活着的缘故,我张贴@rrauenza小提琴的代码从他的评论.

HTML

<input type='hidden' id='tags' style='width:300px'/>

jQuery的

$("#tags").select2({
    createSearchChoice:function(term, data) { 
        if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
        }).length===0) 
        {return {id:term, text:term};} 
    },
    multiple: false,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

Answer 4

由于其中许多答案在4.0+中不起作用,如果您使用的是ajax,则可以让服务器添加新值作为选项.所以它会像这样工作:

1. 用户搜索值(向服务器发出ajax请求)
2. 如果值很高,请返回选项.如果不是只让服务器附加这样的选项:[{"text":" my NEW option)","id":"0"}]
3. 提交表单时,只需检查该选项是否在数据库中,如果没有在保存之前创建它.

Answer 5

我现在认为有一个更好的解决方案

只需在选择选项上将标记设置为 true ？

tags: true

来自https://select2.org/tagging