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

Entering values into a jquery-select2 that are not in the select list

本文关键字：列表 jquery-select2 输入 选择      更新时间：2023-09-26

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

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

怎么可能做到这一点?

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

参见:http://ivaynberg.github.io/select2/'Loading Data'

我用JQuery UI 'autocomplete'解决了一个类似的问题(服务器端)。在这里，我采用的方法是返回对象，其中包括包含可能的解释性信息的标签，不带修饰的文本值，以及组合的ID值&状态标志。我覆盖了select来存储文本&ID到隐藏字段

在我的例子中，我区分了现有的客户要引用，或者用输入的名称创建一个新的客户。我能够列出匹配现有客户或创建"ABC新客户"的选项，非常漂亮:

用户输入:"Alphabet Soup"，看到选项:

    <
  • α包装/gh><
  • 厨汤/gh>
  • 创建"字母汤"

类似的技术可能适用于您。

$(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);
        }
    });
});
相关文章：