Data Not displaying on Select2 with ajax

Related searches

I'm using jQuery select2 with ajax in codeigniter.

My HTML code is:

<div class="col-md-4">
<select id="country" name="country" style="width: 100%;"></select>
<span class='text-red'><?php echo form_error('country_name'); ?></span>
</div>

My select2 ajax code is:

jQuery('#country').select2({
            ajax: {
                url: '<?php echo site_url('countries/get_countries')?>',
                dataType: 'json',
                type : 'GET',
                data: function (param) 
                {
                    return {
                        countries : param.term
                    };
                },
                results: function (data) {
                    var myResults = [];
                    jQuery.each(data, function (index, item) {
                        myResults.push({
                            id: item.id,
                            text: item.name
                        });
                    });
                    return {
                        results: myResults
                    };
                }
            }
        });

returning JSON string is like:

[{"id":"14","name":"India"},{"id":"18","name":"USA"},{"id":"20","name":"jaipur"},{"id":"21","name":"shri lanka"}]

This code is not displaying anything. What is the mistake in this code?

try changing results: function (data) { to success: function (data) {

Select 2 -> Results from AJAX Not Displaying. It's because of this , Below is a checklist to make sure you are returning the data properly and handling the response properly as well. Return response as an Array of� Hi, I can&#39;t resolve this problem: what&#39;s wrong with this code? It does the right ajax request and it receive the right json response (it says when there are no results), but it doesn&#39;t

As per the documentation here: https://select2.github.io/options.html#ajax, the key for processing the results is processResults and not results. Have you tried changing that? Also the documentation of processResults states:

You can modify the results that are returned from the server, allowing you to make last-minute changes to the data, or find the correct part of the response to pass to Select2. Keep in mind that results should be passed as an array of objects. The object should contain an array of data objects as the results key.

Ajax (remote data), For remote data sources only, Select2 does not create a new <option> element for each selection that contains the value and text that should be displayed: You can configure how Select2 searches for remote data using the ajax option. Select2 will pass any options in the ajax object to jQuery's $.ajax function, or the transport function you specify. For remote data sources only, Select2 does not create a new <option> element until the item has been selected for the first time. This is done for performance reasons.

Array of Objects, make sure your object has the following properties: id (This is for the value of the tag) text (This is for the displayed text in the tag) Use processResults instead of Results.

In your AJAX request inside your Select 2 Object, you will have to modify the processResults property of the Select 2 Object’s AJAX object. (That’s a mouthful). In the processResults property, you will use an anonymous method and return the results.

Example:

$("#selectUpsells").select2({
  ajax: { 
   url:'admin/get-product-list',
   type: "post",
   dataType: 'json',
   delay: 250,
   data: function (params) {
    return {

      search_term: params.term
    };
   },
   processResults: function (data) { 
     return {
        results: $.map(data, function(obj) {
            return { id: obj.id, text: obj.product_name };
        })
     };
   },
   cache: true
  }
 });

The Select2 data format, programmatically supplied data from an array or remote data source (AJAX) as dropdown In order to accomplish this, Select2 expects a very specific data format. Any additional levels of nesting is not guaranteed to be displayed properly� When you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event. Preselecting options in an remotely-sourced (AJAX) Select2. For Select2 controls that receive their data from an AJAX source, using .val() will not work. The options won't exist yet, because the AJAX request is not fired until the control is opened and/or the user begins searching.

Search, trim(params.term) === '') { return data; } // Do not display the item if there is no 'text ' property� When a select2 is ajaxed into a hidden div and then the div is shown, the placeholder is not visible. If you select an option and then remove it, the placeholder becomes visible. I confirmed this is the case in both 4.0.1 and 4.0.2. Thanks.

Dropdown, By default, Select2 will display the text property of each data object within the list Any markup, such as HTML, will not be escaped and it is up to you to escape� AJAX calls not returning current data in Internet Explorer can be a frustrating issue to debug. Fortunately, fixing the issue is easier than identifying it.

this usually means select2 did not get a response in the valid format. check that.