javascript 将不在选择列表中的值输入到 jquery-select2 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16513611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Entering values into a jquery-select2 that are not in the select list
提问by Aran Mulholland
I have a use case where I allow people to type values into the text box of the select2 pluginthat do not appear in the select list.
我有一个用例，我允许人们在select2 插件的文本框中键入未出现在选择列表中的值。
In one case I am providing validation and do not submit unless the user has a valid item selected but until they do I do not want to clear their values. The select box might contain 1.00, 1.50, 1.75, NA, ABS and the user has just typed 1.80. This is an invalid value but I don't want to lose their changes, I will flag that box as invalid and allow them to fix their changes. I do not want to add 1.80 to the select box as it is an invalid value, but I don't want to clear it either.
在一种情况下，我提供验证并且不提交，除非用户选择了有效的项目，但在他们这样做之前我不想清除他们的值。选择框可能包含 1.00、1.50、1.75、NA、ABS，而用户刚刚输入了 1.80。这是一个无效值，但我不想丢失他们的更改，我会将该框标记为无效并允许他们修复更改。我不想将 1.80 添加到选择框中，因为它是一个无效值，但我也不想清除它。
How is it possible to achieve this?
怎么可能做到这一点？
采纳答案by Thomas W
If you're validating in JS, Select2 has an example for dynamic loading/generating data which overrides query() to just repeats the user's input.
如果您在 JS 中进行验证，Select2 有一个动态加载/生成数据的示例，该示例覆盖 query() 以仅重复用户的输入。
See: http://ivaynberg.github.io/select2/'Loading Data'
请参阅：http: //ivaynberg.github.io/select2/“加载数据”
I solved a similar problem (server-side) with JQuery UI 'autocomplete'. Here, I took the approach of returning objects wrapping both a labelwith possible explanatory message, a textvalue without decoration, and a combined ID value & status flag. I overrode selectto store the Text & ID to hidden fields.
我用 JQuery UI“自动完成”解决了一个类似的问题（服务器端）。在这里，我采用了返回对象的方法，这些对象包装了一个带有可能的解释性消息的标签、一个没有装饰的文本值以及一个组合的ID 值和状态标志。我覆盖select将文本和 ID 存储到隐藏字段。
In my case, I was distinguishing between existing Customersto reference, or creating a new Customerwith the entered name. I was able to list options of matching existing customers or creating "ABC New Customer", quite nicely:
就我而言，我区分了要引用的现有客户，或使用输入的名称创建新客户。我能够很好地列出匹配现有客户或创建“ABC 新客户”的选项：
User enters: "Alphabet Soup" and sees a choice of:
用户输入：“字母汤”并看到以下选项：
- Alpha Packaging
- Campbells Soup
- create "Alphabet Soup"
- 阿尔法包装
- 金宝汤
- 制作“字母汤”
A similar technique might be applicable to you. Hope this helps.
类似的技术可能适用于您。希望这可以帮助。
回答by nvvetal
$(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);
}
});
});
