Автозаполнение с пометкой
Мне нужно использовать автозаполнение с пометкой, чтобы установить данные клиентов в форме, потому что один счет может быть 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, но это не сработает, потому что де асинхронный вызов. Конечно, когда я использую 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);
});
Я все еще открыт для новых предложений. Большое спасибо!