jqueryjquery-select2-4
jquery-select2 showing undefined in list
When the tags options is enabled i keep getting an undefined on the drop down list.
function formatRepo (repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.full_name + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
//"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
//"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
// "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
function formatResult (result) {
if (result.loading) return "Searching...";
}
$(".js-example-data-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
var jsonD = [{"error":false,"message":"","data":[{"GROUP_NAME_ID":"16323","GROUP_NAME":"AARHUS UNITED UK LTD (OneNet Core)"},{"GROUP_NAME_ID":"44276","GROUP_NAME":"AMNESTY INTERNATIONAL UNITED KINGDOM_950138123"},{"GROUP_NAME_ID":"40612","GROUP_NAME":"BAIN & COMPANY INC. UNITED KINGDOM_925001385"},{"GROUP_NAME_ID":"3026","GROUP_NAME":"BECKMAN COULTER UNITED KINGDOM LTD_900028226"},{"GROUP_NAME_ID":"40989","GROUP_NAME":"BOEING UNITED KINGDOM LIMITED_925001540"},{"GROUP_NAME_ID":"43804","GROUP_NAME":"CONTITECH UNITED KINGDOM_925002897"},{"GROUP_NAME_ID":"40454","GROUP_NAME":"CPM UNITED KINGDON LIMITED_925001355"},{"GROUP_NAME_ID":"2316","GROUP_NAME":"CSM (UNITED KINGDOM) LTD_925000567"},{"GROUP_NAME_ID":"2310","GROUP_NAME":"CUNNINGHAM LINDSEY UNITED KINGDOM_900002099"},{"GROUP_NAME_ID":"33735","GROUP_NAME":"EMBASSEY OF THE UNITED ARAB EMIRATES (OneNet Core)"},{"GROUP_NAME_ID":"3132","GROUP_NAME":"EUROMEDIC UNITED KINGDOM LTD_911460356"},{"GROUP_NAME_ID":"3379","GROUP_NAME":"MCKINSEY & CO INC. UNITED KINGDOM_925000105"},{"GROUP_NAME_ID":"13699","GROUP_NAME":"OXFORD UNITED FOOTBALL CLUB LTD (OneNet Core)"},{"GROUP_NAME_ID":"4584","GROUP_NAME":"PUMA UNITED KINGDOM LTD_950005472"},{"GROUP_NAME_ID":"3267","GROUP_NAME":"ROYAL UNITED HOSPITAL BATH - CATALIST_900223059"},{"GROUP_NAME_ID":"1436","GROUP_NAME":"S. & L. UNITED STORAGE SYSTEMS LTD_950031834"},{"GROUP_NAME_ID":"17550","GROUP_NAME":"SER SOLUTIONS UNITED KINGDOM LTD (OneNet Core)"},{"GROUP_NAME_ID":"17630","GROUP_NAME":"SGS UNITED KINGDOM LTD_925000665"},{"GROUP_NAME_ID":"42205","GROUP_NAME":"UNITED AGENTS LIMITED_925002404"},{"GROUP_NAME_ID":"40001","GROUP_NAME":"UNITED AGENTS LLP_911430196"},{"GROUP_NAME_ID":"2549","GROUP_NAME":"UNITED AGENTS LTD_911430196"},{"GROUP_NAME_ID":"2548","GROUP_NAME":"UNITED AGRI PRODUCTS LIMITED - GPRS_900182496"},{"GROUP_NAME_ID":"13327","GROUP_NAME":"UNITED ARAB EMIRATES EMBASSY (OneNet Core)"},{"GROUP_NAME_ID":"4461","GROUP_NAME":"UNITED BUSINESS MEDIA GROUP LTD_900155663"},{"GROUP_NAME_ID":"3842","GROUP_NAME":"UNITED BUSINESS MEDIA PLC - GPRS_900155663"},{"GROUP_NAME_ID":"24535","GROUP_NAME":"UNITED CARPETS LTD_910766502"},{"GROUP_NAME_ID":"41498","GROUP_NAME":"UNITED CAST BAR (UK) LTD_950105891"},{"GROUP_NAME_ID":"43894","GROUP_NAME":"UNITED DAIRY FARMERS LIMITED_925003162"},{"GROUP_NAME_ID":"723","GROUP_NAME":"UNITED DAIRY FARMERS_910115981"},{"GROUP_NAME_ID":"40800","GROUP_NAME":"UNITED DRUG PUBLIC LIMITED COMPANY_925001555"},{"GROUP_NAME_ID":"113","GROUP_NAME":"UNITED LINCOLNSHIRE HOSPITALS CATALIST_900219353"},{"GROUP_NAME_ID":"2547","GROUP_NAME":"UNITED RESPONSE - CATALIST_900254800"},{"GROUP_NAME_ID":"24366","GROUP_NAME":"UNITED STATES EMBASSY_911415962"},{"GROUP_NAME_ID":"2546","GROUP_NAME":"UNITED THERAPEUTICS EUROPE LTD_911232907"},{"GROUP_NAME_ID":"112","GROUP_NAME":"UNITED UTILITIES GROUP PLC_925000155"},{"GROUP_NAME_ID":"40803","GROUP_NAME":"UNITED UTILITY GROUP PLC - M2M_925000941"},{"GROUP_NAME_ID":"3841","GROUP_NAME":"UNITED WELSH HOUSING ASSOC. - CATALIST_900275753"},{"GROUP_NAME_ID":"3176","GROUP_NAME":"UNITEDHEALTH UK LTD_911169045"},{"GROUP_NAME_ID":"4454","GROUP_NAME":"VANDERLANDE INDUSTRIES UNITED KINGDOM LT_911405044"},{"GROUP_NAME_ID":"687","GROUP_NAME":"WMF UNITED KINGDOM LIMITED_910383186"},{"GROUP_NAME_ID":"2506","GROUP_NAME":"WPS UNITED KINGDOM LTD_910465482"},{"GROUP_NAME_ID":"40186","GROUP_NAME":"YOKOGAWA UNITED KINGDOM LTD_950099226"}],"dbdataCount":null}];
console.log(data);
var dbData = [];
for(i=0;i<jsonD[0].data.length;i++){
dbData[i] = {id: jsonD[0].data[i].GROUP_NAME_ID, full_name:jsonD[0].data[i].GROUP_NAME};
}
console.log(jsonD);
return {
results: dbData,
pagination: {
more: (params.page * 30) < dbData.length
}
};
},
cache: true
},
multiple: true,
tags: true,
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 3,
templateResult: formatRepo,
templateSelection: formatRepoSelection,
closeOnSelect: false
}).on('change', function() {
var $selected = $(this).find('option:selected');
var $container = $('.js-example-tags-container');
var $list = $('<ul>');
$selected.each(function(k, v) {
var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">x</a>' + $(v).text() + '</li>');
$li.children('a.destroy-tag-selected')
.off('click.select2-copy')
.on('click.select2-copy', function(e) {
var $opt = $(this).data('select2-opt');
$opt.attr('selected', false);
$opt.parents('select').trigger('change');
}).data('select2-opt', $(v));
$list.append($li);
});
$container.html('').append($list);
}).trigger('change');function formatRepo (repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.full_name + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
//"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
//"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
// "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
$(".js-example-data-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
var jsonD = [{"error":false,"message":"","data":[{"GROUP_NAME_ID":"16323","GROUP_NAME":"AARHUS UNITED UK LTD (OneNet Core)"},{"GROUP_NAME_ID":"44276","GROUP_NAME":"AMNESTY INTERNATIONAL UNITED KINGDOM_950138123"},{"GROUP_NAME_ID":"40612","GROUP_NAME":"BAIN & COMPANY INC. UNITED KINGDOM_925001385"},{"GROUP_NAME_ID":"3026","GROUP_NAME":"BECKMAN COULTER UNITED KINGDOM LTD_900028226"},{"GROUP_NAME_ID":"40989","GROUP_NAME":"BOEING UNITED KINGDOM LIMITED_925001540"},{"GROUP_NAME_ID":"43804","GROUP_NAME":"CONTITECH UNITED KINGDOM_925002897"},{"GROUP_NAME_ID":"40454","GROUP_NAME":"CPM UNITED KINGDON LIMITED_925001355"},{"GROUP_NAME_ID":"2316","GROUP_NAME":"CSM (UNITED KINGDOM) LTD_925000567"},{"GROUP_NAME_ID":"2310","GROUP_NAME":"CUNNINGHAM LINDSEY UNITED KINGDOM_900002099"},{"GROUP_NAME_ID":"33735","GROUP_NAME":"EMBASSEY OF THE UNITED ARAB EMIRATES (OneNet Core)"},{"GROUP_NAME_ID":"3132","GROUP_NAME":"EUROMEDIC UNITED KINGDOM LTD_911460356"},{"GROUP_NAME_ID":"3379","GROUP_NAME":"MCKINSEY & CO INC. UNITED KINGDOM_925000105"},{"GROUP_NAME_ID":"13699","GROUP_NAME":"OXFORD UNITED FOOTBALL CLUB LTD (OneNet Core)"},{"GROUP_NAME_ID":"4584","GROUP_NAME":"PUMA UNITED KINGDOM LTD_950005472"},{"GROUP_NAME_ID":"3267","GROUP_NAME":"ROYAL UNITED HOSPITAL BATH - CATALIST_900223059"},{"GROUP_NAME_ID":"1436","GROUP_NAME":"S. & L. UNITED STORAGE SYSTEMS LTD_950031834"},{"GROUP_NAME_ID":"17550","GROUP_NAME":"SER SOLUTIONS UNITED KINGDOM LTD (OneNet Core)"},{"GROUP_NAME_ID":"17630","GROUP_NAME":"SGS UNITED KINGDOM LTD_925000665"},{"GROUP_NAME_ID":"42205","GROUP_NAME":"UNITED AGENTS LIMITED_925002404"},{"GROUP_NAME_ID":"40001","GROUP_NAME":"UNITED AGENTS LLP_911430196"},{"GROUP_NAME_ID":"2549","GROUP_NAME":"UNITED AGENTS LTD_911430196"},{"GROUP_NAME_ID":"2548","GROUP_NAME":"UNITED AGRI PRODUCTS LIMITED - GPRS_900182496"},{"GROUP_NAME_ID":"13327","GROUP_NAME":"UNITED ARAB EMIRATES EMBASSY (OneNet Core)"},{"GROUP_NAME_ID":"4461","GROUP_NAME":"UNITED BUSINESS MEDIA GROUP LTD_900155663"},{"GROUP_NAME_ID":"3842","GROUP_NAME":"UNITED BUSINESS MEDIA PLC - GPRS_900155663"},{"GROUP_NAME_ID":"24535","GROUP_NAME":"UNITED CARPETS LTD_910766502"},{"GROUP_NAME_ID":"41498","GROUP_NAME":"UNITED CAST BAR (UK) LTD_950105891"},{"GROUP_NAME_ID":"43894","GROUP_NAME":"UNITED DAIRY FARMERS LIMITED_925003162"},{"GROUP_NAME_ID":"723","GROUP_NAME":"UNITED DAIRY FARMERS_910115981"},{"GROUP_NAME_ID":"40800","GROUP_NAME":"UNITED DRUG PUBLIC LIMITED COMPANY_925001555"},{"GROUP_NAME_ID":"113","GROUP_NAME":"UNITED LINCOLNSHIRE HOSPITALS CATALIST_900219353"},{"GROUP_NAME_ID":"2547","GROUP_NAME":"UNITED RESPONSE - CATALIST_900254800"},{"GROUP_NAME_ID":"24366","GROUP_NAME":"UNITED STATES EMBASSY_911415962"},{"GROUP_NAME_ID":"2546","GROUP_NAME":"UNITED THERAPEUTICS EUROPE LTD_911232907"},{"GROUP_NAME_ID":"112","GROUP_NAME":"UNITED UTILITIES GROUP PLC_925000155"},{"GROUP_NAME_ID":"40803","GROUP_NAME":"UNITED UTILITY GROUP PLC - M2M_925000941"},{"GROUP_NAME_ID":"3841","GROUP_NAME":"UNITED WELSH HOUSING ASSOC. - CATALIST_900275753"},{"GROUP_NAME_ID":"3176","GROUP_NAME":"UNITEDHEALTH UK LTD_911169045"},{"GROUP_NAME_ID":"4454","GROUP_NAME":"VANDERLANDE INDUSTRIES UNITED KINGDOM LT_911405044"},{"GROUP_NAME_ID":"687","GROUP_NAME":"WMF UNITED KINGDOM LIMITED_910383186"},{"GROUP_NAME_ID":"2506","GROUP_NAME":"WPS UNITED KINGDOM LTD_910465482"},{"GROUP_NAME_ID":"40186","GROUP_NAME":"YOKOGAWA UNITED KINGDOM LTD_950099226"}],"dbdataCount":null}];
console.log(data);
var dbData = [];
for(i=0;i<jsonD[0].data.length;i++){
dbData[i] = {id: jsonD[0].data[i].GROUP_NAME_ID, full_name:jsonD[0].data[i].GROUP_NAME};
}
console.log(jsonD);
return {
results: dbData,
pagination: {
more: (params.page * 30) < dbData.length
}
};
},
cache: true
},
multiple: true,
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
}).on('change', function() {
var $selected = $(this).find('option:selected');
var $container = $(this).siblings('.js-example-tags-container');
console.log($selected);
var $list = $('<ul>');
$selected.each(function(k, v) {
var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
$li.children('a.destroy-tag-selected')
.off('click.select2-copy')
.on('click.select2-copy', function(e) {
var $opt = $(this).data('select2-opt');
$opt.attr('selected', false);
$opt.parents('select').trigger('change');
}).data('select2-opt', $(v));
$list.append($li);
});
$container.html('').append($list);
}).trigger('change');;<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div class="container">
<div class="border-radius">
<div class="col-md-6 ">
<fieldset class="border-radius white-bg">
<legend class="border-radius">Search Customer/s</legend>
<div class="col-md-10">
<select class="js-example-data-ajax" style="width:100%">
</select>
</div>
<div class="col-md-2">
<button id="search_customers" type="button" class="btn btn-primary">Go</button>
</div>
<div class="js-example-tags-container">
</div>
</fieldset>
</div>
<!-- //.span6 -->
<div class="col-md-6 ">
<fieldset class="border-radius white-bg">
<legend class="border-radius">Search Customer/s</legend>
<div class="col-md-10">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">Go</button>
</div>
<div>display select in list here</div>
</fieldset>
</div>
<!-- //.span6 -->
</div>
<!-- //.row-fluid -->
</div>I have updated my function to as below but it still does not work.
function formatRepo (repo) {
if (repo.loading || !repo.full_name) return repo.text;
var markup = "";
if(repo.full_name){
//console.log(repo);
markup += "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.full_name + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
//"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
//"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
// "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
}
I have replaced the format function with yours from the jsfiddle and it still does not work. see screenshot.
Solution
UPDATE :
Just found that the values passed to formatRepo function contains the search value too. And the search value doesn't have an attribute full_name in it. The repo value for the search term looks like this {id: "test", text: "test"} which doesn't have a full_name attribute. So I just added a condition like this if(!repo.hasOwnProperty('full_name')){ console.log(repo); return repo.text; } to evaluate that.
So your formatRepo function will look like this
function formatRepo (repo) {
if (repo.loading) return repo.text;
if(!repo.hasOwnProperty('full_name')){ console.log(repo); return repo.text; }
This works with the tags:true attribute.
Hope this helps.
The undefined is caused by the tags:true attribute. I just removed and created a working JSFiddle here https://jsfiddle.net/y18sxt9L/
And tags: true is used when you want the user to create custom tags. In your case you want the user to just search for a customer and select a value from the displayed result. So you don't need the tags:true attribute.
Note that when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far.
For more explanation on the tags checkout the documentation here https://select2.github.io/examples.html#tags
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices