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

Question

我使用的是最新版本的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但它不起作用.我也看过这个答案,但到目前为止还没有运气.

Answer 1

这是由于3.x中的无证行为导致的4.0.0的变化.在3.x中,如果您使用的createSearchChoice话也应该使用tags(将其设置为true空数组).这是因为createSearchChoice并且tags被捆绑在一起.

在4.x中,createSearchChoice重命名为,createTag因为它实际上是在创建标记.这在4.0.0-beta.2发行说明中有记录.此外,第二个(也是未记录的)参数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,这是因为默认实现与您的旧版本相匹配createSearchChoice.我确实添加tags: true了,因为仍然需要它才能使它工作.

最重要的是,您现在已经有一些无效的标记已经更改为a <select>.

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

只有在使用a 且在a上无效时,才需要该type属性(以前设置为hidden).这不应该对你做出任何明显的改变.<input /><select>