Question

我想使用Select2插件加载远程数据并自定义选择框。我遵循文档，它就像一个魅力。但是当用户找不到匹配时，会显示消息：“找不到结果。”

我的要求是在用户找不到匹配项时显示默认选项而不是消息，类似于此http://prntscr.com/dodf8k

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

    var markup = '<div class="clearfix">' +

    '<div clas="col-sm-10">' +
    '<div class="clearfix">' +
    '<div class="col-sm-6"><b>' + repo.full_name + '</b></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  

    });
  });

我用select2插件制作了fiddle来加载远程数据。请有人告诉我我该如何做到这一点？

Answer 1

你应该像你这样（fiddle）对待你在'processResults'函数中提到过的案例：

function formatRepo (repo) {
    if (repo.loading) return repo.text;

    var markup = '<div class="clearfix">' +
 
    '<div clas="col-sm-10">' +
    '<div class="clearfix">' +
    '<div class="col-sm-6"><b>' + repo.full_name + '</b></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
          if(data.items.length > 0) {
          	console.log(data.items);
            return {
              results: data.items  
            };
          }
          else return {results: [{ 'loading' : false, 'description' : 'others', 'name' : 'others', 'text' : 'others', 'full_name' : 'Some Name' }]}
        },
        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  
        
    });
  });

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>



<select class="js-data-example-ajax" style="width:100%">
  <option value="3620194" selected="selected">Select a value......</option>
  <option>others</option>
</select>

当Select2 jquery插件

1 个答案: