在 Select2 jquery 插件中“未找到结果”时动态显示默认选项

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

您应该像这样对待您在“processResults”函数中提到的情况 (fiddle)：

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>