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"}] 

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>" )                  .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")

Answer 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.