jquery - 选择2版本4.0允许用户输入自由文本

我正在使用Select2的最新版本:Select2 4.0。

我想允许用户输入自由文本。换句话说，如果用户在下拉菜单(Ajax返回的数据)中找不到选项，我希望他们能够“选择”他们键入的任何文本。

这是我的标记:

<select class="required form-control" id="businessName" data-placeholder="Choose An Name" > </select>

这是我用来初始化Select2的JavaScript:

$("#businessName").select2({
    ajax: {
      url: "/register/namelookup",
      dataType: 'json',
      delay: 250,
      type: 'post',
      data: function (params) {
        return {
          businessName: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, page) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 4,
    createSearchChoice:function(term, data) {
        if ( $(data).filter( function() {
          return this.text.localeCompare(term)===0;
        }).length===0) {
          return {id:term, text:term};
        }
    },
});

我添加了createSearchChoice，但是它不起作用。我也看过this answer，但到目前为止还没有运气。

最佳答案

这是4.0.0中的更改，是由于3.x中未记录的行为引起的。在3.x中，如果您使用的是createSearchChoice，那么您也应该一直使用tags(将其设置为true或一个空数组)。这是因为createSearchChoice和tags绑在一起了。

在4.x中，createSearchChoice重命名为createTag，因为它实际上是在创建标记。这已记录在4.0.0-beta.2 release notes中。另外，createSearchChoice的第二个(也是未记录的)参数从未实现过-但是在这种情况下，您实际上并不需要它。

因此，在注意到这两个更改之后，允许用户添加新选项的工作代码为

$("#businessName").select2({
    ajax: {
      url: "/register/namelookup",
      dataType: 'json',
      delay: 250,
      type: 'post',
      data: function (params) {
        return {
          businessName: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, page) {
        return {
          results: data.items
        };
      },
      cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 4,
    tags: true
});

注意，我没有实现createTag，这是因为the default implementation与您的旧createSearchChoice尝试执行的操作匹配。我确实添加了tags: true，因为它仍然是使它工作所必需的。

最重要的是，由于您已更改为<select>，因此您确实有一些无效的标记。

<select class="required form-control" id="businessName" data-placeholder="Choose An Name" ></select>

仅在使用type时才需要hidden属性(以前设置为<input />)，并且该属性在<select>上无效。这不会给您带来任何明显的变化。