如何使用 jQuery Select2 插件删除与当前键入的文本匹配的下拉项？

Question

我正在使用 select2 jQuery 插件和 ajax 调用来填充下拉选择菜单作为用户类型。 我的输入被配置为标记，所以允许多选并且用户可以输入他们自己的标记，所以下拉项只是建议。

问题是，每当用户键入时，下拉列表中的第一项始终与用户键入的内容相匹配。 后面的项目是 ajax 调用检索到的建议。

发生这种情况并非不合理，因为当前键入的文本实际上是一个有效的选择，但我不希望它出现在下拉列表中。 我认为这会让用户误以为列表中的第一项是来自 ajax 调用的建议，我不希望对此产生任何混淆。

是否可以从列表中删除第一项（用户当前键入的文本），如果可以，如何删除？

我的构造函数选项如下所示：

myInput.select2({
    multiple: true,
    minimumInputLength: 3,
    ajax: {
        url: 'the-url',
        quietMillis: 1500,
        dataType: 'json',
        data: function(term, page) {
            return { 
                term: term.trim(),
                page: page,
                anotherParam: anotherInput.select2('val'),
            }
        },
        results: function(data, page, query) {
            // 'data' never includes the item I'm trying to remove
            // so it must be added at a later stage
            var results = [];
            for (var i=0; i<data.length; i++) {
                results.push( {id:data[i], text:data[i]} );
            }
            return {results: results};
        }
    },
    createSearchChoice: function (term) {
        term = term.trim();
        if ('' == term) {
            return null;
        }
        return { id: term.replace(',',''), text: term };
    }
});

编辑：

我知道这可能看起来违反直觉，但我实际上并不想让用户使用新选项更新建议列表。 我只是将输入用作用户选择（和取消选择）多个选项的便捷方式。 如果（静态）建议列表（ajax）中有匹配项，那么我想显示它们，同时还允许用户输入他们自己的选项。

我想要隐藏第一个选择项的动机是：当我选择一个建议项时，这将触发一个回调，该回调将使用一些相应的数据填充另一个控件。 选择自定义选项（无论用户输入什么）不应在其他控件中生成任何相应的数据。 前几天我在输入中输入了一些东西，有 5 个建议。 我忘记了第一个条目只是回应我输入的内容，并将其误认为是与我输入的内容完全匹配的建议。 当我选择它时，其他控件中没有相应的数据显示。

我很快就意识到发生了什么，但如果我对此感到困惑，那么用户很容易也很困惑。 我不想要那种混乱。 删除回显文本选项将对此有所帮助。

Answer 1

您看到用户输入的原因是因为您使用了 CreateSearchChoice 选项，该选项允许用户通过他们的输入创建自己的标签

如果要删除它，请删除 createSearchChoice

我目前使用 createSearchChoice ，但我在末尾附加了文本“（新标签）”，以便用户可以看到差异，请参阅下面的代码：

createSearchChoice: function (term, data) {
if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            // call $.post() to add this term to the server, receive back id
            // return {id:id, text:term}
            // or detect this shiftiness and do it below in the on-change
    return {
          id: -1+'/'+term,
          text: $.trim(term) + ' (new tag)'
    , isNew: true
        };  
},

Answer 2

在当前版本 (Select2 4.1.0-beta.1) 中，您只需要像这样使用 createTag：

myInput.select2({
    ...,
    createTag: function (params) {
        return null;
    },
    ...
});