Question

我有一个用例，我允许用户在select2 plugin的文本框中输入值，这些文本框没有出现在选择列表中。

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

如何实现这一目标？

Answer 1

如果你在JS中验证，Select2有一个动态加载/生成数据的例子，它会覆盖query（）以重复用户的输入。

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

我用JQuery UI'自动完成'解决了类似的问题（服务器端）。在这里，我采用了返回对象的方法，其中包含带有可能解释性消息的标签，没有装饰的文本值，以及组合的 ID值＆amp;状态标志。我重写select以存储文字＆amp; ID到隐藏字段。

在我的情况下，我区分了现有客户以引用或使用输入的名称创建新客户。我能够列出匹配现有客户的选项或创建“ABC新客户”，非常好：

用户输入：“Alphabet Soup”并选择：

Alpha Packaging
Campbells Soup
创建“Alphabet Soup”

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

Answer 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);
        }
    });
});

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

2 个答案: