jQuery autocomplete ajax request not displaying returned data

Question

When I see on the debug developer tool ajax request responded with data but the data is not rendered in the text box. The data contains some special characters as you can see in the picture.

What is exactly wrong with the response function ? What (like utf-8 encoding maybe) should I add to the ajax call to display the special character ?

html:

<select name="selCat">
    <option>....</option>
</select>

<input class="col-3" type="text" id="txtPOI" name="txtPOI" />

jquery:

$("#txtPOI").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo site_url("crowd/get_POIs") ?>',
                data: {cat: selectedCode, q: request.term},
                dataType: "json",
                type: "post",
                success: function(data) {
                    response(data);
                },
                fail : function ( jqXHR, textStatus, errorThrown ) {
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                },minLength: 3
            });
        }
    });

Controller :

function get_POIs(){
        $cat = $this->input->post('cat');
        $q = $this->input->post('q');
        //echo $cat;

        if (isset($cat) && isset($q)){
            $cat = strtolower($cat);
            $q = strtolower($q);
            $data=$this->crowd->get_POIs($cat,$q);
            //echo "aa";
            $a_json = array();
            if(count($data) > 0){
                foreach ($data as $row){
                      $a_json_row["title"] = $row->title;
                      $a_json_row["contentid"] = $row->contentid;
                      $a_json_row["latitude"] = $row->latitude;
                      $a_json_row["longitude"] = $row->longitude;
                      array_push($a_json, $a_json_row);

                }
                echo json_encode($a_json);
            }   
        }

    }

Model :

function get_POIs($cat, $q){

    $this->db->DISTINCT();
    $this->db->select('title, a.contentid, latitude, longitude, address');
    $this->db->from('attraction a');
    $this->db->join('geographicdata g', 'a.contentid = g.contentid', 'left');
    $this->db->where('cat3 = "'.$cat.'"');
    $this->db->where('title like "%'.$q.'%"');
    $this->db->order_by('title','ASC');
    $query = $this->db->get()->result();
    //die(var_dump($query));
    //echo $this->db->get_compiled_select();
    return $query;
}

Answer 1

I managed to solve this problem by modifying the code inside the success event. Here how I did it.

change from

success: function(data) {
                response(data);
            }

to

success: function(data) {

            response( $.map( data, function( item )
            {
                return{
                        label: item.title,
                        value: item.title,
                        contentid: item.contentid,
                        latitude: item.latitude,
                        longitude: item.longitude
                    }
            }));

 }