将不在选择列表中的值输入到 jquery-select2 中

Posted 2023-05-07

【中文标题】将不在选择列表中的值输入到 jquery-select2 中

【英文标题】：Entering values into a jquery-select2 that are not in the select list

【发布时间】：2013-05-06 23:43:44

【问题描述】：

我有一个用例，我允许人们在select2 plugin 的文本框中键入未出现在选择列表中的值。

在一种情况下，我提供验证并且不提交，除非用户选择了有效的项目，但在他们这样做之前，我不想清除他们的值。选择框可能包含 1.00、1.50、1.75、NA、ABS 并且用户刚刚输入了 1.80。这是一个无效值，但我不想丢失他们的更改，我会将该框标记为无效并允许他们修复他们的更改。我不想将 1.80 添加到选择框，因为它是无效值，但我也不想清除它。

如何做到这一点？

【问题讨论】：

好问题。保留用户的过渡编辑并对其进行验证，是正确的数据处理。

从 4.0.0 开始，Select2 通过 $('xyz').select2(tags: true) 支持自定义值，不支持验证。但是，您可以格式化该值以指示它是无效的。请参阅***.com/a/30021059/192092。

【参考方案1】：

如果您在 JS 中进行验证，Select2 有一个动态加载/生成数据的示例，它会覆盖 query() 以重复用户的输入。

请参阅：http://ivaynberg.github.io/select2/“正在加载数据”

我用 JQuery UI 'autocomplete' 解决了一个类似的问题（服务器端）。在这里，我采用了返回对象的方法，其中包含一个带有可能解释性消息的 label、一个没有装饰的 text 值，以及一个组合的 ID 值和状态标志。我覆盖了 select 以将文本和 ID 存储到隐藏字段。

在我的例子中，我是区分 现有客户 以引用，或 创建一个新客户 与输入的名称。我能够很好地列出匹配现有客户或创建“ABC 新客户”的选项：

用户输入：“字母汤”并看到以下选项：

Alpha 包装 金宝汤 制作“字母汤”

类似的技术可能适用于您。希望这会有所帮助。

【讨论】：

我注意到通过使用这种方法我的ajax 实现被忽略了，有没有办法在query 执行之前或之后调用我的ajax 逻辑？

@MaksimVi。 query 是基础数据源 API，ajax 是通用 AJAX/JSONP 数据源的快捷方式。它们是提供数据源的替代方法，显然 Select2 调用两者都没有意义！如果您想手动执行 AJAX，请将其放入您的 query 处理程序代码中。

@ThomasW 我只想重用ajax对象中提供的逻辑（手动调用）。

你的query 实现会很高兴看到！

【参考方案2】：

$(document).ready(function() 
    var items = [id: "1", text: "some_available_text"];
    $("#hidden_input_for_select2").select2(
        query: function (query) 
            var data = results: [];
            if(query.term.length > 0)
                data.results.push(id: 0, text: query.term );
            
            $.each(items, function()
                if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 )
                    data.results.push(id: this.id, text: this.text );
                
            );
            query.callback(data);
        
    );
);