1
我想在另一个div中显示选定的结果，而不是在输入框中。jquery-select2 ajax搜索在另一个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;
\t }
\t function formatRepoSelection (repo) {
\t \t return repo.full_name || repo.text;
\t }
\t
\t $(".js-example-data-ajax").select2({
\t ajax: {
\t url: "https://api.github.com/search/repositories",
\t dataType: 'json',
\t delay: 250,
\t data: function (params) {
\t return {
\t q: params.term, // search term
\t page: params.page
\t };
\t },
\t processResults: function (data, params) {
\t // parse the results into the format expected by Select2
\t // since we are using custom formatting functions we do not need to
\t // alter the remote JSON data, except to indicate that infinite
\t // scrolling can be used
\t 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 = [];
\t for(i=0;i<jsonD[0].data.length;i++){
\t \t dbData[i] = {id: jsonD[0].data[i].GROUP_NAME_ID, full_name:jsonD[0].data[i].GROUP_NAME};
\t }
console.log(jsonD);
\t return {
\t results: dbData,
\t pagination: {
\t more: (params.page * 30) < dbData.length
\t }
\t };
\t },
\t cache: true
\t },
\t multiple: true,
\t escapeMarkup: function (markup) { return markup; },
\t minimumInputLength: 1,
\t templateResult: formatRepo,
\t templateSelection: formatRepoSelection
\t }).on('change', function() {
\t var $selected = $(this).find('option:selected');
\t var $container = $(this).siblings('.js-example-tags-container');
\t var $list = $('<ul>');
\t $selected.each(function(k, v) {
\t var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
\t $li.children('a.destroy-tag-selected')
\t .off('click.select2-copy')
\t .on('click.select2-copy', function(e) {
\t var $opt = $(this).data('select2-opt');
\t $opt.attr('selected', false);
\t $opt.parents('select').trigger('change');
\t }).data('select2-opt', $(v));
\t $list.append($li);
\t });
\t $container.html('').append($list);
\t }).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;
\t }
\t function formatRepoSelection (repo) {
\t \t return repo.full_name || repo.text;
\t }
\t
\t $(".js-example-data-ajax").select2({
\t ajax: {
\t url: "https://api.github.com/search/repositories",
\t dataType: 'json',
\t delay: 250,
\t data: function (params) {
\t return {
\t q: params.term, // search term
\t page: params.page
\t };
\t },
\t processResults: function (data, params) {
\t // parse the results into the format expected by Select2
\t // since we are using custom formatting functions we do not need to
\t // alter the remote JSON data, except to indicate that infinite
\t // scrolling can be used
\t 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 = [];
\t for(i=0;i<jsonD[0].data.length;i++){
\t \t dbData[i] = {id: jsonD[0].data[i].GROUP_NAME_ID, full_name:jsonD[0].data[i].GROUP_NAME};
\t }
console.log(jsonD);
\t return {
\t results: dbData,
\t pagination: {
\t more: (params.page * 30) < dbData.length
\t }
\t };
\t },
\t cache: true
\t },
\t multiple: true,
\t escapeMarkup: function (markup) { return markup; },
\t minimumInputLength: 1,
\t templateResult: formatRepo,
\t templateSelection: formatRepoSelection
\t }).on('change', function() {
\t var $selected = $(this).find('option:selected');
\t var $container = $(this).siblings('.js-example-tags-container');
\t console.log($selected);
\t var $list = $('<ul>');
\t $selected.each(function(k, v) {
\t var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
\t $li.children('a.destroy-tag-selected')
\t .off('click.select2-copy')
\t .on('click.select2-copy', function(e) {
\t var $opt = $(this).data('select2-opt');
\t $opt.attr('selected', false);
\t $opt.parents('select').trigger('change');
\t }).data('select2-opt', $(v));
\t $list.append($li);
\t });
\t $container.html('').append($list);
\t }).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">
\t \t <div class="col-md-6 ">
\t \t \t <fieldset class="border-radius white-bg">
\t \t \t <legend class="border-radius">Search Customer/s</legend>
\t \t \t \t <div class="col-md-10">
\t \t \t \t \t <select class="js-example-data-ajax" style="width:100%">
\t \t \t \t \t
\t \t \t \t \t </select>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-2">
\t \t \t \t \t <button id="search_customers" type="button" class="btn btn-primary">Go</button>
\t \t \t \t </div>
<div class="js-example-tags-container">
\t \t \t \t \t \t \t
\t \t \t \t \t \t </div>
\t
\t \t \t </fieldset>
\t \t \t
\t \t </div>
\t \t <!-- //.span6 -->
\t \t <div class="col-md-6 ">
\t \t \t <fieldset class="border-radius white-bg">
\t \t \t <legend class="border-radius">Search Customer/s</legend>
\t \t \t \t <div class="col-md-10">
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t <div class="col-md-2">
\t \t \t \t \t <button type="button" class="btn btn-primary">Go</button>
\t \t \t \t </div>
<div>display select in list here</div>
\t
\t \t \t </fieldset>
\t \t \t
\t \t </div>
\t \t <!-- //.span6 -->
\t </div>
\t <!-- //.row-fluid -->
</div>