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

Question

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

在一种情况下，我提供验证并且不提交，除非用户选择了有效的项目，但在他们这样做之前我不想清除他们的值。选择框可能包含 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 新客户”的选项：

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

• 阿尔法包装
• 坎贝尔汤
• 制作“字母汤”

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

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