Select2加載遠程數據示例不能正常工作

這個例子根本不起作用..有人可以在jfiddle中創建這個嗎？Select2加載遠程數據示例不能正常工作

以下是示例網站。 https://select2.github.io/examples.html 非常感謝你的幫助！

enter image description here

來源

2015-04-22 Dinesh

適合我。你在問什麼？你有沒有嘗試過自己呢？ –

我創建了一個基本的 - https://jsfiddle.net/59p19q7z/，但這似乎不起作用。你能指出我在做什麼錯誤（可能是一切）嗎？真的很感謝你的幫助！ – Dinesh

爲此找到了答案。看下面的例子。希望這可以幫助別人！

這裏是Fiddle

這裏是腳本：

function formatRepo (repo) { 
    if (repo.loading) return repo.text; 

    var markup = '<div class="clearfix">' + 
    '<div class="col-sm-1">' + 
    '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' + 
    '</div>' + 
    '<div clas="col-sm-10">' + 
    '<div class="clearfix">' + 
    '<div class="col-sm-6">' + repo.full_name + '</div>' + 
    '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' + 
    '<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' + 
    '</div>'; 

    if (repo.description) { 
     markup += '<div>' + repo.description + '</div>'; 
    } 

    markup += '</div></div>'; 

    return markup; 
    } 

    function formatRepoSelection (repo) { 
    return repo.full_name || repo.text; 
    } 

$(document).ready(function(){ 

    $(".js-data-example-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, page) { 
      // 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 
      return { 
      results: data.items 
      }; 
     }, 
     cache: true 
     }, 
     escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
     minimumInputLength: 1, 
     templateResult: formatRepo, // omitted for brevity, see the source of this page 
     templateSelection: formatRepoSelection // omitted for brevity, see the source of this page 

    }); 
    });

來源

2015-04-22 20:56:40 Dinesh

這兩條線是造成你的錯誤。

templateResult: formatRepo, // omitted for brevity, see the source of this page 
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page

formatRepo未定義。我認爲你還需要更多的代碼。如果您刪除這些行，您會看到格式現在可用於下拉菜單。

如果您想查看確切的錯誤，請爲您的瀏覽器打開您的開發工具並檢查控制檯。

來源

2015-04-22 20:30:39

是的，我也注意到了！我試圖直接從該Select2網站使用該示例。你能給我一個工作的例子嗎？也許在jfiddle？ – Dinesh

對不起現在工作 - http://jsfiddle.net/59p19q7z/3/。 – Dinesh

如果你感到高興，請標記爲答案。很高興它的工作！ –

你懷念那些

function formatRepo (repo) { 
if (repo.loading) return repo.text; 

var markup = '<div class="clearfix">' + 
'<div class="col-sm-1">' + 
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' + 
'</div>' + 
'<div clas="col-sm-10">' + 
'<div class="clearfix">' + 
'<div class="col-sm-6">' + repo.full_name + '</div>' + 
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' + 
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' + 
'</div>'; 

    if (repo.description) { 
     markup += '<div>' + repo.description + '</div>'; 
    } 
    markup += '</div></div>'; 
    return markup; 
} 

function formatRepoSelection (repo) { 
    return repo.full_name || repo.text; 
}

您必須插入兩個功能 第一個（formatRepo）追加和定製下拉列表項目和選擇行的其他功能（選項）

來源

2015-06-11 13:42:23 Bafi

Select2加載遠程數據示例不能正常工作

回答

相關問題