0

I'm using the jQuery select2 plugin and trying to show data through Ajax request. But it is not calling the Ajax function, I have already tried everything but didn't work. Here's my code -

Html

<select class="form-control " multiple="" data-placeholder="Select Youtube Videos" aria-hidden="true"  name="collection_youtube_videos[]" id="collection_youtube_videos"></select>

Javascipt

$(document).ready(function(){
    $('#collection_youtube_videos').select2({
        ajax: {
            url: url,
            dataType: 'json',
            data: function (params) {
                var query = {
                    //trim the extra whitespace
                    search: params.term.replace(/\s+/g, " ").trim(),
                }

                // Query parameters will be ?search=[term]&type=public
                return query;
            },
            processResults: function (data) {
                // Transforms the top-level key of the response object from 'items' to 'results'
                return {
                    results: data.items
                };
            }
        }
    });
});

I'm using following versions

JQuery - 2.1.4

Select2- 4.0.0

The problem is that when I type something in the input box of select2, it didn't call this ajax request to get data. Can anyone help me with this?

Jitendra
  • 584
  • 1
  • 10
  • 28

2 Answers2

3

You can change ajax call as per below

Check this link for reference it contains similar problem https://stackoverflow.com/a/21602199/6429700

$(document).ready(function(){
    var url = "test.php";
    $('#collection_youtube_videos').select2({
        minimumInputLength: 2,
        tags: [],
        ajax: {
            url: url,
            dataType: 'json',
            data: function (params) {
                var query = {
                    //trim the extra whitespace
                    search: params.term.replace(/\s+/g, " ").trim(),
                }

                // Query parameters will be ?search=[term]&type=public
                return query;
            },
            processResults: function (data) {
                // Transforms the top-level key of the response object from 'items' to 'results'
                return {
                    results: data.items
                };
            }
        }
    });
});
select {
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>

<select class="form-control " multiple="" data-placeholder="Select Youtube Videos" aria-hidden="true"  name="collection_youtube_videos[]" id="collection_youtube_videos"></select>
Nirali
  • 1,776
  • 2
  • 12
  • 23
-1

you have to add "select2" css class to select tag

<select class="form-control select2" multiple="" data-placeholder="Select Youtube Videos" aria-hidden="true"  name="collection_youtube_videos[]" id="collection_youtube_videos"></select>
Chương Lê
  • 1
  • 1