Question

将select标记与ajax一起使用时，一切正常，但在尝试将select2添加到input标记时，ajax从未调用过。

以下是3个select2实例的示例：

<select>标记ajax（效果很好）
<input>标记没有ajax（效果很好）
<input>标记（这是有问题的）

＆＃13;

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$(".select2-no-ajax").select2({
  data: data
})

$(".select2-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, 
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    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
});


/*************** Functions taken from select2 source ****************/

function formatRepo (repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
      "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
      "<div class='select2-result-repository__meta'>" +
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection (repo) {
  return repo.full_name || repo.text;
}

＆＃13;

input, select {
  width: 100%;
}
div.good {
  color: green; 
}
div.bad {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://select2.github.io/css/s2-docs.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
    

<div class="good">This one works great (select tag with ajax):</div>
<select class="select2-ajax">
  <option value="3620194" selected="selected">select2/select2</option>
</select>

<br /><br />
<div class="good">This one works great (regular input):</div>
<input class="select2-no-ajax" />

<br /><br />
<div class="bad">This on is problematic (input with ajax) - ajax request never called:</div>
<input class="select2-ajax" />

＆＃13;

这是select2中的错误吗？我是否需要在选项中添加其他内容？
我使用的是最新版本的select2（v4.0.2）

Answer 1

在Select2 4.0中不推荐与输入标记的兼容性。现在鼓励使用<select>标记。有关详细信息，请参阅下面的链接。

https://select2.github.io/options.html#core-options

<input />上的select2不会触发ajax调用

1 个答案: