CODEWITHSUNDEEP
jqueryajaxjquery-select2jquery-select2-4
Dekel
Dekel

Reputation: 62536

select2 on <input> doesn't trigger ajax calls

When using select tag with ajax everything works perfectly, however when trying to add the select2 to an input tag - the ajax never called.

Here is an example of 3 select2 instances:

  1. <select> tag with ajax (works great)
  2. <input> tag without ajax (works great)
  3. <input> tag with ajax (this is the problematic one)

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

Is it a bug in select2? Am I required to add something else to the options?
I'm using the latest version of select2 (v4.0.2)

Upvotes: 3

Views: 1652

Answers (1)

programming test
programming test

Reputation: 59

The compatibility with the input tag is deprecated in Select2 4.0. It is now encouraged to use the <select> tag instead. See also the link below for more information.

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

Upvotes: 2

Related Questions