Question

请参阅https://select2.github.io/examples.html，文字＆＃34;搜索＆＃34;在加载远程数据时显示。但是，我不知道为什么＆＃34; undefined＆＃34;在我的案例中显示。

这是css文件。

<div class="col-sm-9">
  <select class="js-data-example-ajax form-control" style="width:100%;">
    <option value="select2/select2" selected="selected">select2/select2</option>
  </select>
</div>

和ajax调用的设置

$(".js-data-example-ajax").select2({
      ajax: {
        url: "/search/products",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term,
            page: params.page
          };
        },
        processResults: function (data, page) {
          return {
            results: data.items
          };
        },
        cache: true
      },
      minimumInputLength: 1,
      templateResult: formatProduct, 
      templateSelection: formatProductSelection
    });

结果：

enter image description here

Answer 1

private class ExampleAction extends AbstractAction {

        public ExampleAction() {
            super(R.drawable.ic_title_export_default);
        }

        @Override
        public void performAction(View view) {
            Toast.makeText(OtherActivity.this, "Example action",
                    Toast.LENGTH_SHORT).show();
        }

    }
    //use for signle action how to use for multiactions
       ActionBar actionBar = (ActionBar) findViewById(R.id.actionbar);
       actionBar.addAction(new ExampleAction());

在select 2中加载存储库的完整代码，您可以根据需要更改此代码 enter image description here

我的选择框有多个选择

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

  $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, params) {
        // 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, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });

您可以格式化结果

<select id="to_users" name="to_users" class="form-control js-data-example-ajax" multiple="multiple">
                                                        </select>

如果要将结果格式化为select2行为，则禁用代码

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: $.map(data, function(obj) {
                        return { id: obj.user_id, text: obj.name };
                    })
                        //results: data
                    };
                },

Answer 2

请尝试

 function formatRepo (repo) {
     if(repo.value == undefined) {
           repo.value = 'Loading...'
     }
     var markup = '<div class="clearfix">' + repo.value  + '</div>'

     return markup;
 }

Answer 3

上述问题可能有解决方法。随意发表评论。

以下是我之前编写过的代码，假设返回JSON为{"items":[{"id":1,"name":"Product1"},{"id":2,"name":"Product2"}]}

var formatProduct = function(data){
   return '<div>'+(data.name)+'</div>';
}

我修改了以下代码，并且“搜索...”＆＃39;文字再次显示：

var formatProduct = function(data){
   return '<div>'+(data.name || data.text)+'</div>';
}

在select2.js，第798行中，远程加载数据时

this.template(data, option);

this.template指向select2.js 第1058行

Results.prototype.template = function (result, container) {
  var template = this.options.get('templateResult');
  container.innerHTML = template(result);
};
// result is an object indicating whether the data is loading.
// {disabled: true, loading: true, text: "Searching…"}

此处的模板采用自定义参数＆＃39; templateResult＆＃39;并生成文本，因此，自定义函数必须包含data.text，否则返回underfined。

Answer 4

就我而言，它是formatProduct函数（我的代码中有不同的名称，但它是一样的）。假设您为templateResult调用formatProduct：

templateResult: formatProduct

在这种情况下，您必须检查formatProduct返回的内容，例如：

function formatProduct(product) {
           return product.name || product.text;
         }

在我的情况下，我总是返回product.name，“搜索”文本在product.text下，所以我不得不检查在没有找到产品时显示它。

无法显示＆＃34;正在搜索＆＃34;使用select2时（加载远程数据）

4 个答案: