Select2 - Results not listing in dropdown using AJAX

Question

I am using Select2 4.0.1, I have used ajax to populate the result based on users input, but whenever I search for anything select2 not listing any result, I am getting proper result in ajax response.

also it inputbox loss the focus after ajax response.

This is how I have initialized select2 -

  $('#select_tag_element').select2({
      closeOnSelect: false,
      multiple: true,
      placeholder: 'Assign a new tag',
      tags: true,
      tokenSeparators: [","],
      ajax: {
        url: "search_url",
        dataType: 'json',
        type: 'GET',
        delay: 250,
        data: function (params) {
          return {
            search: params.term,
            page: params.page
          };
        },
        processResults: function (data) {
          console.log(data)
          return { results: $.map( data, function(item) {
              return { id: item.id, text: item.name }
            })
          };
        },
        cache: true
      }
    });

I am getting the expected JSON Javascript Console.

[Object, Object, Object]
0: Object
id: 239
name: "Tag1"
__proto__: Object
1: Object
id: 255
name: "Tag2"
__proto__: Object
2: Object
id: 256
name: "Tag3"
__proto__: Object
length: 3
__proto__: Array[0]

Any help is much appreciated.Thnx:)

Update -

I debug and found it load the result in dropdown, but it removes result dropdown when globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );this line is executed in jquery.js

if ( fireGlobals ) {
  globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
  // Handle the global AJAX counter
  if ( !( --jQuery.active ) ) {
    jQuery.event.trigger( "ajaxStop" );
  }
}

How can I prevent result dropdown to close on above trigger?

===============================================================

Update

I am able to figure out this issue. this is due I was initializing the select2 on ajax success. so the result dropdown was hiding.

Thanks alot for this - your 2nd update helped me - I was going crazy trying to figure out why my results keep disappearing! — Alpaus
– Alpaus, Commented Dec 14, 2017 at 23:45

Muhammad Waqas · Accepted Answer · 2015-12-16 07:18:03Z

2

i just modified your code this will help you

$('#select_tag_element').select2({
  closeOnSelect: false,
  multiple: true,
  placeholder: 'Assign a new tag',
  tags: true,
  tokenSeparators: [","],
  ajax: {
    url: "search_url",
    dataType: 'json',
    type: 'GET',
    delay: 250,
    data: function (params) {
      return {
        search: params.term,
        page: params.page
      };
    },
    processResults: function (data) {
      var newData = [];
                    data.forEach(function (i,item) {
                        newData.push({
                            id: i.id  //id part present in data
                            , text: i.name  //string to be displayed
                        });
                    });

            return {
            results: newData
          };
    },
    cache: true
  },
   formatResult: function(data) {
        return data.name;
    },
    formatSelection: function(data) {
        return data.id;
    },
    escapeMarkup: function(m) {
        return m;
    }
});

answered Dec 16, 2015 at 7:18

Muhammad Waqas

1,15012 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sampat Badhe Over a year ago

Thanks Muhammad.. but this wont work for me. I debug and found it load the result in dropdown, but it removes result dropdown when globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] ); this line is executed in jquery.js

Collectives™ on Stack Overflow

Select2 - Results not listing in dropdown using AJAX

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related