Using HTML in jQuery UI autocomplete

Solution 1:

Add this to your code:

).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</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);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

Note: On old versions of jQueryUI use .data("autocomplete")" instead of .data("ui-autocomplete")

Solution 2:

This is also documented in jquery-ui autocomplete documentation at: http://api.jqueryui.com/autocomplete/#option-source

The trick is:

1. Use this jQuery UI extension
2. Then in autocomplete option pass autocomplete({ html:true});
3. Now you can pass html <div>sample</div> in "label" field of JSON output for autocomplete.

If you don't know how to add the plugin to JQuery UI then:

1. Save the plugin(Scott González' html extension) in a js file or download the js file.
2. You have already added the jquery-ui autocomplete script in your html page(or the jquery-ui js file). Add this plugin script after that autocomplete javascript file.

Solution 3:

This solution is not recommended but you can just edit source file jquery.ui.autocomplete.js (v1.10.4)

Original:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

Fixed:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},