Select2 下拉菜单但允许用户输入新值？

Question

我希望有一个包含一组值的下拉列表，但也允许用户“选择”一个未在此处列出的新值。

如果您在tags 模式下使用它，我看到select2 支持此功能，但有没有不使用标签的方法？

Answer 1

@fmpwizard 提供的excellent answer 适用于 Select2 3.5.2 及以下版本，但不适用于 4.0.0。

从很早开始（但可能不会早于这个问题），Select2 就支持“标记”：如果您允许，用户可以在其中添加自己的价值。这可以通过tags 选项启用，您可以使用an example in the documentation。

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

默认情况下，这将创建一个与他们输入的搜索词具有相同文本的选项。如果您希望以特殊方式对其进行标记，则可以修改使用的对象，或者在选择对象后远程创建该对象。

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

除了作为通过select2:select 事件传入的对象上易于发现的标志之外，额外的属性还允许您在结果中呈现稍有不同的选项。因此，如果您想通过在其旁边放置“(new)”来直观地表明这是一个新选项，您可以这样做。

$("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+，请查看下方的 this answerKevin 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

只是为了保持代码有效，我从his comment 发布@rrauenza Fiddle's code。

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

Answer 6

改进@fmpwizard 答案：

//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
  if ( $(data).filter( function() {
    return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
  }).length===0) {
    return {id:term, text:term};
  }
},

//solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

Answer 7

感谢大家的帮助，我在 Codeigniter 中使用了以下代码，我正在使用版本：select2 的 3.5.2。

var results = [];
var location_url = <?php echo json_encode(site_url('job/location')); ?>;
$('.location_select').select2({
    ajax: {
        url: location_url,
        dataType: 'json',
        quietMillis: 100,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            results = [];
            $.each(data, function(index, item){
                results.push({
                    id: item.location_id,
                    text: item.location_name
                });
            });
            return {
                results: results
            };
        }
    },
    //Allow manually entered text in drop down.
    createSearchChoice:function(term, results) {
        if ($(results).filter( function() {
            return term.localeCompare(this.text)===0; 
        }).length===0) {
            return {id:term, text:term + ' [New]'};
        }
    },
});

Answer 8

我刚刚从 Kevin Brown 那里偶然发现了这个。 https://stackoverflow.com/a/30019966/112680

对于v4.0.6，您只需使用tags: true 参数即可。

Answer 9

var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;

在大多数情况下，我们需要将值与不敏感的寄存器进行比较。而且这段代码会返回false，这会导致在数据库中创建重复记录。而且浏览器Safary不支持String.prototype.localeCompare()，这段代码在这个浏览器中不起作用；

return this.text.localeCompare(term)===0;

会更好地替换为

return this.text.toLowerCase() === term.toLowerCase();