Ajax Based Select2 Codeigniter Issue - php

Question

Hi friends I am trying to do a Ajax Based select2 using codeigntier. I am using 4.0.1 Select2 Version. I am getting the response from ajax but the result is not showing in SELECT2. Can you please check the code below and tell me where I have done wrong.
Here is my Model
//Model
class AddServiceAreaModel extends CI_Model
{
//Function for getting suburbs from restaurant
//MAIN FUNCTION FOR DATATABLE
public function get_postcodes($q)
{
$query = $this->db->select('postcode')
->group_by('postcode')
->like('postcode', $q)
->get('tbl_suburb');
$json = $query->result_array();
echo json_encode($json);
}
}
Here is my View
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading"> Add Service Area</div>
<form id="addFrm">
<div class="panel-body">
<div class="">
<!-- Modal content-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="postcode">Postcode</label>
<select class="selectbox form-control required" id="postcode" name="postcode"></select>
</div>
</div>
</div>
</div>
<button type="submit" id="btnSubmit" class="btn btn-success">Update</button>
</div>
</form>
</div>
<!--End Advanced Tables -->
</div>
</div>
<!-- /. ROW -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#postcode').select2({
placeholder: 'Select for tag',
ajax: {
url: '<?php echo base_url('restaurant/addservicearea/get_postcode') ?>',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
});
</script>
Here is My Controller
public function get_postcode()
{
//$_GET['term']. Term is the variable is in jquery-ui.js file.
if(isset($_GET['term']))
{
$q = $_GET['term'];
$this->AddServiceAreaModel->get_postcodes($q);
}
}
The output showing blank result even i got the response in ajax.
Can you please help me where i am wrong? Thanks in advance.

Answer 1

Earlier I thought you need a success function, but select2 uses the processResults function. It turns out, you just need that to look like this:
processResults: function (data) {
return {
results: data.items
};
},
Then, in PHP when you send back your response, select2 expects an items element, and then arrays that contain "id" and "text":
// This is just a sample, of course yours will be dynamic
echo json_encode(array(
'items' => array(
array('id' => '0', 'text' => '12345'),
array('id' => '1', 'text' => '12346'),
array('id' => '2', 'text' => '12347')
)
);
I tested this out locally, and I was getting results after making these changes. Should work for you now.