jquery-select2 ajax搜索显示另一个div中的标签

我想在另一个div中显示所选结果，而不是在输入框中。

function formatRepo (repo) { if (repo.loading) return repo.text; var markup = "" + "
" + "" + "" + repo.full_name + "
"; if (repo.description) { markup += "" + repo.full_name + "
"; } markup += "" + //" " + repo.forks_count + " Forks
" + //" " + repo.stargazers_count + " Stars
" + // " " + repo.watchers_count + " Watchers
" + "
" + "
"; 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 = $(''); $selected.each(function(k, v) { var $li = $('×' + $(v).text() + '
'); $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 = "" + "
" + "" + "" + repo.full_name + "
"; if (repo.description) { markup += "" + repo.full_name + "
"; } markup += "" + //" " + repo.forks_count + " Forks
" + //" " + repo.stargazers_count + " Stars
" + // " " + repo.watchers_count + " Watchers
" + "
" + "
"; 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 = $(''); $selected.each(function(k, v) { var $li = $('×' + $(v).text() + '
'); $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');;

        Search Customer/s    
   
  
 
 
    Search Customer/s  
   
 display select in list here

我发现的问题是容器类。

 $(".js-example-data-ajax").select2({ ajax: { //url: "https://api.github.com/search/repositories", 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'); $selected.each(function(k, v) { var $li = $('×' + $(v).text() + '
'); $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');

jquery-select2 ajax搜索显示另一个div中的标签

如何在JQuery中使用localStorage为ajax调用创建自定义缓存机制？

更新记录Ajax时引导成功警报

如何知道getJSON（）请求的集合何时完成？

通过ajax调用CouchDB时获得空响应

如何使用PHP发送服务器错误响应？

需要帮助了解如何ajaxify一个网站

woocommerce自定义结帐字段添加费用订购ajax

ASP.NET MVC 3 – Ajax.BeginForm vs jQuery Form Plugin

AJAX错误：完成此操作所需的数据不可用

使用值数组重复函数