模糊上的 jQuery Select2 标记

Posted 2023-05-07

【中文标题】模糊上的 jQuery Select2 标记

【英文标题】：jQuery Select2 Tag on Blur

【发布时间】：2012-11-29 00:47:50

【问题描述】：

我正在使用 Select2 在我的应用程序中创建一个 Gmail 样式的电子邮件地址字段。它工作得很好，除了一种情况：当用户输入一个电子邮件地址并且没有在其后放置空格或逗号，并且没有按 Enter 或 Tab 键时。例如，如果他们只是输入一个电子邮件地址，然后使用鼠标选择表单中的下一个字段，他们输入的电子邮件地址就会消失。

我有一个示例 jsfiddle here 来说明问题。

这是我在隐藏输入上设置 select2 的方式：

$(function()
    $('input').select2(
        tags: [],
        width: "300px",
        dropdownCss: display: 'none',
        tokenSeparators: [',', ', ', ' ']
    );
);

有没有办法让我设置 select2 以便 onBlur 它只取剩下的并且当前不是标签并使其成为一个标签？

【参考方案1】：

现在在 select2 库的 3.3 版中使用“selectOnBlur”选项支持此功能。

【讨论】：

这似乎不适用于 Select2 4.0.1-rc.1：$.fn.select2.defaults.set("selectOnBlur", "true");

选项已重命名为selectOnClose

【参考方案2】：

我有一个带有 select2（标记模式）和一个提交按钮的表单。默认情况下，当用户键入标签时，如果不从下拉菜单中选择标签或按下触发控制键之一，用户输入将丢失，因为插件会在 blur 事件时关闭生成的输入 dom 对象。

我对这个问题的快速解决方法是破解插件模糊功能并添加以下行：

var val=this.search.val();
if($.trim(val)!='') this.onSelect(id:val,text:val);

一旦调用模糊函数，上面的代码就会检查用户是否进入。如果有任何它触发选择事件并发送所需的对象。我传递的对象仅适用于标记模式下的 select2，如果您使用 select2 v3.2，则可以在第 1311 行的 AbstractSelect2 的模糊功能开始处插入此行。我希望这能让您了解如何自定义小部件根据您的需要。

【讨论】：

虽然我不喜欢自己修改库来获得此功能，但这是迄今为止唯一有效的答案。我所做的另一项更改是将“noFocus：true”传递给“onSelect”方法，然后在底部检查它而不调用“focusSearch”，因为输入文本真的很烦人，请单击另一个文本字段然后让旧的 select2 框再次聚焦。

感谢@Ramin 和@davertron！由于某些原因，我不能使用 select2 的最新版本（外部点击不会关闭任何内容），所以我回到 v3.2 并让你们两个 hack。非常棘手，因为我只访问了缩小版本。无论如何，这里是黑客的最后要点，对于其他人：gist.github.com/hartator/6689203

【参考方案3】：

从documentation 4.0.3 开始：

$('select').select2(
  selectOnClose: true
);

如果用户点击其他地方，这将捕获选择并创建一个标签。

【参考方案4】：

我真的不明白你在这里要做什么，因为你在谈论电子邮件：

jQuery(element.val().split(",")).each(function () 
                data.push(id: this, text: this);
            );

但你可以试试这个：

var splitted = element.val().split(",");
for(var i=0,z=splitted.length;i<z;i++)
    data.push(id: splitted[i], text: splitted[i]);

顺便说一句，你的 jsfiddle 不完整。

【讨论】：

我已经删除了这些设置，因为它们与手头的问题无关，并更新了我的小提琴和上面的代码。