Just by doing Select2 hello-world exercises I cannot load ajax data, but rather getting an error:

Uncaught TypeError: c.ajax is not a function
at Object.transport (select2.min.js:1)
at d (select2.min.js:1)

My code:

<script src=".2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src=".js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src=".0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src=".0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#my-input').select2({
      placeholder: "Search for something",
      minimumInputLength: 1,
      ajax: {
        url: "",
        dataType: 'json',
        delay: 250,
        data: function(params) {
          return {
            "term": params.term, // search term
            "from": 0,
            "size": 20
          };
        },
        processResults: function (data, params) {
          params.page = params.page || 1;
          data.hits = $.map(data.hits, function(obj) {
            obj.text = obj.text || obj.name;
            return obj;
          });
          return {
            results: data.hits,
          };
        },
        cache: true
      }
    });
});
</script>

Just by doing Select2 hello-world exercises I cannot load ajax data, but rather getting an error:

Uncaught TypeError: c.ajax is not a function
at Object.transport (select2.min.js:1)
at d (select2.min.js:1)

My code:

<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#my-input').select2({
      placeholder: "Search for something",
      minimumInputLength: 1,
      ajax: {
        url: "https://www.example./search",
        dataType: 'json',
        delay: 250,
        data: function(params) {
          return {
            "term": params.term, // search term
            "from": 0,
            "size": 20
          };
        },
        processResults: function (data, params) {
          params.page = params.page || 1;
          data.hits = $.map(data.hits, function(obj) {
            obj.text = obj.text || obj.name;
            return obj;
          });
          return {
            results: data.hits,
          };
        },
        cache: true
      }
    });
});
</script>

• javascript
• jquery
• ajax
• jquery-select2

1 Answer 1

The underlying problem was in jquery-3.2.1.slim.min.js, according to some sources ajax has been removed from the slim version of jquery, therefore to make select2 work again one needs include full version of jquery:

<script src="https://code.jquery./jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>