Reputation: 23
i need to use autocomplete with tagging to set the customers data in a form, because one invoice could be a N customers. i try with severals tags and autocomplete tools to make this task, but i don't get how to do that, i'll give you an example. The Json example file:
{
"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
}
]
}
}
The jquery and select2 code:
$('#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) {
}
});
}
});
Ok, first i try to ajax and i get all data, no problem with that, the problem comes when i try to filter the data from the result object to show in the input field, so to try to solve this, i use the createSearchChoice
function, but i don't know how to solve from here, i try to use $.grep
but i get an array and this array will not work in the return of this function.
Then i try with query
function and intern ajax call but that will not work because de async call. Of course, when i use query
function i dont use the ajax
function from the select2
and i dont use the createSearchChoice
.
To filter the local data i try with $.grep
, but i need the term condition to build the result object, in select2
when i use ajax
function i don't have the 'term' condition in the results function.
Any help will be appreciated. Thank you very much and excuse my english!
----------
I found a library, (Selectize.js
), that adapts better for the solution. Here is the example, the source json
is the same. selectTag
will be an input or select tag.
$.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);
});
I'm still open for new suggestions. Thank you very much!
Upvotes: 2
Views: 435