Select2 加载远程数据示例不起作用

Question

这个例子根本不起作用..有人可以在 jsfiddle 中创建这个吗？？？？

这是示例站点。 https://select2.github.io/examples.html 非常感谢您的帮助！！！

Answer 1

这两行导致你的错误。

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

formatRepo 未定义。我认为您仍然需要更多代码。如果删除这些行，您将看到格式现在适用于下拉菜单。

如果您想查看确切的错误，请为您的浏览器打开您的开发工具并检查控制台。

Answer 2

已找到答案。请参见下面的示例。希望这对其他人有帮助！

这是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  

    });
  });

更新：

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

Answer 3

你想念那些

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) 添加和自定义下拉列表项和选择行的另一个功能（选项）

Select2 加载远程数据示例不起作用

Select2 Loading remote data Example not working

jquery-select2