我需要使用带有标签的自动完成功能在表单中设置客户数据，因为一张发票可能是 N 个客户。我尝试使用几个标签和自动完成工具来完成这项任务，但我不知道如何做到这一点，我会给你一个例子。Json 示例文件：
{
"data": {
"LastId": 13,
"ResultObject": [
{
"Name": "David Lastra",
"customerId": 1,
"son": [
{
"Name": "Junior",
"customerId": 9,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
},
{
"Name": "Frank",
"customerId": 10,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
},
{
"Name": "Gustavo",
"customerId": 11,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
},
{
"Name": "Mike",
"customerId": 12,
"son": null,
"parent": 1,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
}
],
"parent": null,
"isLeaf": false,
"level": "0",
"expanded": true,
"loaded": true
},
{
"Name": "Jorge Lastra",
"customerId": 2,
"son": [
{
"Name": "Jose",
"customerId": 13,
"son": null,
"parent": 2,
"isLeaf": true,
"level": "1",
"expanded": false,
"loaded": false
}
],
"parent": "null",
"isLeaf": false,
"level": "0",
"expanded": true,
"loaded": true
},
{
"Name": "Arturo Lastra",
"customerId": 3,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Lennin González",
"customerId": 4,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Alejandro Gómez",
"customerId": 5,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Humberto Correa",
"customerId": 6,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Fernando Perez",
"customerId": 7,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
},
{
"Name": "Franklin González",
"customerId": 8,
"son": null,
"parent": "null",
"isLeaf": true,
"level": "0",
"expanded": false,
"loaded": false
}
]
}
}
jquery 和 select2 代码：
$('#testTags').select2({
placeholder: 'Customers'
, tags : true
, tokenSeparators : [',']
, multiple : true
, minimumInputLength: 1
, ajax: {
url : 'route/to/Customers.json'
, dataType : 'json'
, quietMillis : 100
, data : function (term, page) {
return { term: term };
}
, results : function(data, page) {
var myData = [];
$.each(data.data.ResultObject, function (index, item){
myData.push({
id : item.customerId
, text : item.Name
});
});
return {results: myData};
}
}
, createSearchChoice: function(term, data) {
var customers = $.grep(data, function(c){
return c.text.indexOf(term) > -1;
});
console.log(customers);
if ($(customers).filter(function() {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id : term,
text: term
};
}
}
, query: function(q) {
console.log(q);
var lData = { results: [] };
var lResult = null;
$.ajax({
type : 'GET'
, url : 'route/to/Customers.json'
, dataType : 'json'
, beforeSend: function () {
}
, success : function (data) {
lResult = data.data.ResultObject;
$.each(lResult, function() {
console.log(q.term.length);
//if(q.term.length == 0 || this.Name.toUpperCase().indexOf(q.term.toUpperCase()) >= 0){
lData.results.push({ id: this.customerId, text: this.Name });
//}
});
$('#testTags').select2('data', lData);
console.log(lData);
q.callback(lData);
}
, error : function (xhr, ajaxOptions, throwError) {
}
});
}
});
好的，首先我尝试使用 ajax 并获取所有数据，这没问题，当我尝试从结果对象中过滤数据以显示在输入字段中时，问题就来了，所以为了解决这个问题，我使用了createSearchChoice函数，但我不知道如何从这里解决，我尝试使用$.grep但我得到一个数组，这个数组在这个函数的返回中不起作用。然后我尝试使用query函数和实习生 ajax 调用，但这不起作用，因为 de async 调用。当然，当我使用query函数时，我不使用ajax函数中的函数，select2也不使用createSearchChoice. 要过滤我尝试使用的本地数据$.grep，但我需要术语条件来构建结果对象，select2当我使用ajax函数时，结果函数中没有“术语”条件。
任何帮助将不胜感激。非常感谢并原谅我的英语！
----------
我找到了一个库 ( Selectize.js)，它更适合解决方案。这是示例，来源json是相同的。selectTag将是一个输入或选择标签。
$.ajax({
url: 'route/to/Customers.json'
, dataType: 'json'
, success: function(data) {
console.log(data);
$('#selectTag').selectize({
maxItems: null
, theme: 'display'
, valueField: 'customerId'
, searchField: 'Name'
, options: data.data.ResultObject
, render: {
option: function(data, escape) {
return '<div class="testOption"><span class="names" style="color: red !important;">' + escape(data.Name) + '</span></div>';
}
, item: function (data, escape) {
return '<div class="testItem"><span class="names" style="border-radius: 3px; background-color: black; color: red; border-color: red;">' + escape(data.Name) + '</span></div>';
}
}
, create: function (input) {
return {
customerId: 0
, Name: input
};
}
});
}
});
$('#selectTag').each(function(){
var $container = $('<div>').addClass('resultTags').html('Current value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }
$(this).on('change', update);
update();
$container.insertAfter($input);
});
我仍然愿意接受新的建议。非常感谢！