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

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

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

这是我的标记：

这是我用来初始化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但是，因为仍然需要它才能使其正常工作。

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

只有在使用并且在上无效时，才需要type属性（以前设置为hidden ）。 这不应该对你做出任何明显的改变。