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(/&lt;/g,"<");
                row=row.replace(/&gt;/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);
        }