Question

Am using ui autocomplete from http://jqueryui.com/demos/autocomplete/#remote
Using PHP in search.php to return results.

Am trying to get my custom output of

<li>Company Name | Contact Name</li>

This is coming from the following code:

if(is_array($rs) && count($rs) > 0){
        foreach ($rs as $item) {
            //format: "Name Surname=>cid_uid"
            $json = array();
            $json['id'] = $item['parentCompanyId'].'_'.$item['uid'];
            $json['label'] = $item['companyName'] . ' | ' . $item['name'] . ' ' . $item['surname'];
            $data[] = $json;
        }
    }

This works fantstically well, however to make it easier to read results, I would like to rather have results on 2 lines within the < li > tags, so that its more like this:

<li>
Contact Name<br>
Company Name | Department Name
</li>

I’ve tried the following:

$json['label'] = $item['name'] . ' ' . $item['surname'] . '\n' .$item['companyName'];

and

$json['label'] = $item['name'] . ' ' . $item['surname'] . '<br>' .$item['companyName'];

and

$json['label'] = $item['name'] . ' ' . $item['surname'] . '\\n' .$item['companyName'];

All tries result in the list either showing the actual <br> tag or \n rather than pushing to the next line.

Viewing source with firebug shows Name<br>Company

Not sure if this is happening because of the:

header("Content-type: application/json");
echo json_encode($data);

Please note, my question is related to getting the HTML output to produce 2 lines within a <li> tag via autocomplete/php/json .. I’m not asking about how to add Department Name..Hope I’m making sense..

Ta

Answer 1

Override the _renderItem method:

$("#autocomplete").autocomplete()
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( item.label )
            .appendTo( ul );
    };

This demo from the documentation does the same thing: http://jqueryui.com/demos/autocomplete/#custom-data

By default, .append( item.label ) is .text( item.label ) which is why your <br /> gets replaced with <br />