Select2 Loading remote data Example not working

Question

this example is not working at all.. Can someone please create this in jfiddle????

Here is the example site. https://select2.github.io/examples.html Thank you so much for the help!!!

Answer 1

Found an answer for this. See the below example. Hope this helps others!

Here is the Fiddle

Here is the script :

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  

    });
  });   

---

Updated:

I see this question has been getting a lot of visits lately. Please note the jfiddle links no longer work.

Answer 2

These two lines are causing your error.

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

formatRepo is undefined. I think you still need some more code in there. If you remove these lines you will see that the formatting now works for the drop down.

If you want to see the exact error open your dev tools for you browser and check in the console.

Answer 3

You miss those

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;
 }

you must insert the two function first one (formatRepo) to append and custmize the dropdown list items and the other function for selection row (option)