Using html in jQuery UI autocomplete

Question

Before jQuery UI 1.8.4 I could use html in the JSON array I built to work with an autocomplete.

I was able to do something like:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

That would show up as red text in the drop down.

As of 1.8.4 that does not work. I found http://dev.jqueryui.com/ticket/5275 which tells me to use the Custom HTML example here which I have had no luck with.

How can I go about getting HTML to show up in the suggestion?

My jQuery is:

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

My JSON array includes HTML like the following:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

The solution: Kieran's answer was correct except for one typo. Here's what I ended up with:

$(function() {
    $("#findUserIdDisplay").autocomplete({
        source: "ui_autocomplete_users_withuname.php",
        minLength: 2,
    select: function(event, ui) {
        $('#findUserId').val(ui.item.id);

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

Answer 1

Add this to your code:

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

So your code becomes:

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }.data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) //  + + "<br>" + item.desc + "</a>"
                .appendTo( ul );
        };

   //     });
    });
</script>