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

Question

将 select 标签与 ajax 一起使用时一切正常，但是当尝试将 select2 添加到 input 标签时 - ajax 永远不会打电话。

这是 3 个 select2 实例的示例：

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

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

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

<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" />

是select2的bug吗？我需要在选项中添加其他内容吗？
我使用的是最新版本的 select2 (v4.0.2)

Answer 1

在 Select2 4.0 中不推荐使用与输入标签的兼容性。现在鼓励使用 <select> 标签。另请参阅下面的 link 了解更多信息。

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

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

select2 on <input> doesn't trigger ajax calls

ajax

jquery

jquery-select2

jquery-select2-4