Autocomplete: Formatting the results - php

Question

Let me try ask this again with a code snippet with what I have tried
I'm trying to format a Jquery autocomplete to include a heading for each of the data sources and to highlight the term. I'm using Codeigniter and thought maybe the easiest would be to format it before i send it back:
JS:
$( ".auto-search" ).autocomplete({
source: '/json/autocomplete_search',
minLength: 2,
});
PHP (Codeigniter)
public function autocomplete_search()
{
$term = $this->input->get('term');
//load model and get results
$this->load->model("mymodel");
$results1= $this->mymodel->search_one($term);
$results2= $this->mymodel->search_two($term);
//Start JSON string
$json='[';
//first source
if ($result1->num_rows() > 0)
{
$json .= '{"value":"<h3>Heading One<h3>"}';
foreach ($results1->result_array() as $r1)
{
$result = str_replace($term,"<strong>".$term."</strong>",$r1['title']);
$json .= ',{"value":"'.$result.'"}';
}
}
//second source
if ($result2->num_rows() > 0)
{
if ($result1->num_rows() > 0){$json .= ',';}
$json .= '{"value":"<h3>Heading Two<h3>"}';
foreach ($results2->result_array() as $r2)
{
$result = str_replace($term,"<strong>".$term."</strong>",$r2['location']);
$json .= ',{"value":"'.$result.'"}';
}
}
//Close JSON string
$json .= ']';
echo $json;
}`
Unfortunately I'm not getting a formatted output, instead, it actually adds the words < h1> and < strong> to the output. Here is sample output:

Answer 1

Okay so I've found a way to do it. Here is how I did it:
Javascript:
$( ".auto-search" ).autocomplete({
source: '/hotpepper/json/autocomplete_search2',
minLength: 2,
open: function(event, ui) {
$(".ui-autocomplete .ui-menu-item a").each(function (i) {
var row = $(this).html();
row=row.replace(/</g,"<");
row=row.replace(/>/g,">");
$(this).html(row);
});
},
});
PHP(Codeigniter):
public function autocomplete_search2()
{
$term = $this->input->get('term');
//load model and get results
$this->load->model("establishment_model");
$results1= $this->establishment_model->search_autocomplete_est($term);
$results2= $this->establishment_model->search_autocomplete_loc($term);
//Start JSON string
$json='[';
//first source
if ($results1->num_rows() > 0)
{
$header= "<h3 style='font-weight:bold'>Accommodation:</h3>";
$json .= '{"value":"'.$header.'"}';
foreach ($results1->result_array() as $r1)
{
$result = str_replace($term,"<strong style='color:#C00'>".$term."</strong>",$r1['establishment_name']);
$json .= ',{"value":"'.$result.'"}';
}
}
//second source
if ($results2->num_rows() > 0)
{
if ($results1->num_rows() > 0){$json .= ',';}
$header= "<h3 style='font-weight:bold'>Destinations:</h3>";
$json .= '{"value":"'.$header.'"}';
foreach ($results2->result_array() as $r2)
{
$result = str_replace($term,"<strong style='color:#C00'>".$term."</strong>",$r2['establishment_location']);
$json .= ',{"value":"'.$result.'"}';
}
}
//Close JSON string
$json .= ']';
echo $json;
}
Since auto-complete escapes my html that I send through, I just unescape it by replacing < and > with <> when i open the auto complete box.
EDIT:
Also had to add the following event to format the result back:
close: function(event, ui) {
var result = $(this).val();
if (result.search("</h3>") ==-1)
{
result=result.replace(/<strong style='color:#C00'>/g,"");
result=result.replace(/<\/strong>/g,"");
}
else
{
result="";
}
$(this).val(result);
}