ui autocomplete formatting <li> results on 2 lines

autocomplete, jquery, json, php

Solution

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 `&lt;br /&gt;`

Problem

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&lt;br&gt;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

Original source