JQuery autocomplete ajax request not displaying returned data

Question

When I see the debugging developer tool, the ajax request responds with data, but the data does not appear in the text box. The data contains some special characters, as you can see in the picture.

What exactly is wrong with the answer function? What (such as utf-8 encoding) should be added to the ajax call to display a 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 changing the code inside the success event. Here is how I did it.

change

 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 } })); }