当用户键入时，Select2 下拉列表允许用户输入新值

Posted 2023-05-07

【中文标题】当用户键入时，Select2 下拉列表允许用户输入新值

【英文标题】：Select2 dropdown allow new values by user when user types

【发布时间】：2014-10-26 07:31:00

【问题描述】：

select2 组件可以配置为接受新值，如Select2 dropdown but allow new values by user? 中的询问

你可以在http://jsfiddle.net/pHSdP/646/看到它的代码如下：

$("#tags").select2(
    createSearchChoice: function (term, data) 
        if ($(data).filter(function () 
            return this.text.localeCompare(term) === 0;
        ).length === 0) 
            return 
                id: term,
                text: term
            ;
        
    ,
    multiple: false,
    data: [
        id: 0,
        text: 'story'
    , 
        id: 1,
        text: 'bug'
    , 
        id: 2,
        text: 'task'
    ]
);

问题在于，只有当您输入新值并按 Enter 或按 Tab 时，新值才会添加到列表中。

是否可以设置 select2 组件在使用类型时接受这个新值并离开 select2。 （就像普通的 html 输入标签一样，当您通过单击屏幕上的某个位置离开时，它会保留您输入的值）

我发现 select2 有 select2-blur 事件，但我找不到获取这个新值并将其添加到列表的方法？！

【问题讨论】：

添加属性selectOnBlur: true, 似乎对我有用

成功了！请查看：jsfiddle.net/pHSdP/647 发送答案，以便我将其标记为正确！

【参考方案1】：

添加属性selectOnBlur: true, 似乎对我有用。

编辑：很高兴它也对你有用！

【参考方案2】：

我正在使用 Select2 4.0.3 并且必须添加两个选项：

tags: true,
selectOnBlur: true,

这对我有用

【讨论】：

对于 v4，看起来 selectOnBlur 已更改为 selectOnClose

【参考方案3】：

并且能够与现有选择一起提交多个新选择：

select2(tags: true, selectOnBlur: true, multiple: true)