Select2 JS not showing data from AJAX

Question

I am trying to use select2 js latest version for fetching ajax results, but i am getting the following error:

jQuery.Deferred exception: Cannot read property 'results' of undefined
TypeError: Cannot read property 'results' of undefined

jQuery version i am using: jquery-3.2.1.min

Bootstrap version i am using: 4

Here is my code:

$(document).ready(function(){
    		$('#category').select2({
    			placeholder: 'Subjects',
    			minimumInputLength: 3,
    			allowClear: true,
    			ajax:{
    				url: "<?php echo base_url(); ?>library/ajax-categories",
    				dataType: "json",
    				delay: 250,
    				data: function(params)
    				{
    					return{
    						search: params.term,
    						type: 'public'
    					};
    				},
    				processResults: function(data, page)
    				{
    					var newResults = [];

    					$.each(data, function(index, item)
    					{
    						newResults.push({
    							id: item.CategoryID,
    							text: item.CategoryName
    						});
    					});
    					return
    					{
    						results: newResults
    					}
    				}
    			}
    		});
    	});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select class="select2 form-control" name="category[]" id="category" placeholder="Choose Subjects" multiple>
    </select>

Response I am getting from serverside script:

[
 {"CategoryID":"1","CategoryName":"A Name"},
 {"CategoryID":"2","CategoryName":"B Name"},
 {"CategoryID":"3","CategoryName":"C Name"}
]

I convert the following response in the select2 pattern that is "id, text" as you can see in my JS code.

Kindly help me out in resolving this error.

Possible duplicate of Select2 JS Loading remote data with Ajax — Master Yoda
– Master Yoda, Commented Nov 20, 2017 at 14:49

ztadic91 · Accepted Answer · 2017-11-20 15:00:26Z

2

It looks like a syntax issue. Reformat your return statement from the processResults function like below. The problem is in the return statement.

  return {
      results: newResults,
  };

JS engines will convert your statement to this:

return;
{
   results: newResults 
}

Additional info here and here

answered Nov 20, 2017 at 15:00

ztadic91

2,8041 gold badge17 silver badges21 bronze badges

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

2 Comments

Mubbasher Ahmed Qureshi Over a year ago

thanks alot! it was just syntax writing style issue. i fixed it with this: return { results: newResults };

ztadic91 Over a year ago

Glad I could help!

Collectives™ on Stack Overflow

Select2 JS not showing data from AJAX

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related