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

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 'autocomplete‘解决了一个类似的问题(服务器端)。在这里，我采用了返回对象的方法，该对象同时包装了一个包含可能的解释性消息的标签、一个没有修饰的文本值以及一个组合的ID值和状态标志。我重写了select，将文本和ID存储到隐藏字段。

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

用户输入："Alphabet Soup“并看到以下选项：

字母汤Packaging

• Campbells
• create“字母汤”

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

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