JQuery-Select2 AJAX поиска отображать теги в другом DIV
Я хотел бы отобразить выбранные результаты в другом div, а не в поле ввода.
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');
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');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>1 ответ
Решение
Я обнаружил проблему с классом контейнера.
$(".js-example-data-ajax").select2({
ajax: {
//url: "https://api.github.com/search/repositories",
url: "<?=BASE_URL ?>api/corporate-performance-dashboard/get-customers",
dataType: 'json',
type : 'POST',
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
var dbData = [];
if(data.data != null){
for(i=0;i<data.data.length;i++){
dbData[i] = {id: data.data[i].GROUP_NAME_ID,full_name:data.data[i].GROUP_NAME, text:data.data[i].GROUP_NAME };
}
}
params.page = params.page || 1;
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
}).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">×</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');