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!!!

Vaasa

Works fine for me. What are you asking for? Have you tried anything yourself yet? – Showroom

I created a basic one - jsfiddle.net/59p19q7z but this doesnt seem to work. Could you please point out what I am doing wrong (probably everything) here? Really appreciate you help! – Vaasa

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.

Vaasa

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.

Showroom

Yeah I noticed that too!. I was trying to use that example straight from that Select2 site. Could you provide me an working example? Perhaps on jfiddle? – Vaasa

I am accepting this answers because you quicky responded for my questions. this is the right solution for the above question jsfiddle.net/59p19q7z/3. just in case if anyone else is looking for. – Vaasa

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)

Customary