Select 2 版本 4.0 允许用户输入自由文本

Question

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

我想允许用户输入自由文本。换句话说，如果用户在下拉列表中找不到选项（ajax 返回的数据），我希望他们能够 'select' 他们输入的任何文本。

这是我的标记：

<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，但到目前为止运气不好。

Answer 1

这是 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>

仅当您使用 <input /> 时才需要 type 属性（之前设置为 hidden）并且在 <select> 上无效。这不会对您造成任何明显的改变。

Select 2 版本 4.0 允许用户输入自由文本

Select 2 version 4.0 allow user to enter free text

jquery

jquery-select2

jquery-select2-4