Question

I’m using the following code and it’s working, getting values back etc, but the <b> and <br> tags show up as text rather than get rendered. I’d like the item.id and item.label to be on different lines, if possible the item.id bold:

 $( "#predictSearch" ).autocomplete({
 source: function( request, response ) {
  $.ajax({
   url: "index.pl",
   dataType: "json",
   data: {
    term: request.term
   },
   success: function( data ) {
    response( $.map( data.items, function( item ) {
     return {
      label: '<B>' + item.id + '</B><br>' + item.label,
      value: item.id
     }
    }));
   }
  });
 },
 minLength: 2
});

Answer 1

It seems like you have some extra code (ajax call) for the autocomplete that it may not need. But, you can just swap out the special characters that jquery puts in to escape the html in the ‘open’ event of the autocomplete.

$("#autocomplete_field").autocomplete({
source: "autocomplete.php",
minLength: 2,
open: function(event, ui){
       $("ul.ui-autocomplete li a").each(function(){
        var htmlString = $(this).html().replace(/&lt;/g, '<');
        htmlString = htmlString.replace(/&gt;/g, '>');
        $(this).html(htmlString);
        });
     }
});

Full example http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/.

And, if you are using perl in the autcomplete, http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/ is an example for that.