jQuery UI - Autocomplete - Custom style?

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.

Answer 2

Instead of Success event, use _renderItem event.

Live implementation at Vroom. Type airport, you shall notice an image at the left.

NOTE: _renderItem below has some complex calculation. Don't go by that, just utilize the idea.

$("#myInput")
        .autocomplete({
            minLength: 0,
            delay: 10,
            source: function (req, responseFn) {
                //Your ajax call here returning only responseFn Array having item.id and item.id
            },
            select: function (event, ui) {
                //action upon selecting an item
                return false;
            }
        })
    .data("autocomplete")
        ._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><span class='airoplane'>" + (item[0] + (item[2] == "" ? "" : ", " + item[2]) + (item[1] == "" ? "" : " (" + item[1] + ")")).replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term).replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span class='highlight'>$1</span>") + "</span></a>")
                .appendTo(ul);
        };

Answer 3

We solved this problem by adding the following code at the end of the function:

$("ul.ui-autocomplete li a").each(function(){
   var htmlString = $(this).html().replace(/&lt;/g, '<');
   htmlString = htmlString.replace(/&gt;/g, '>');
   $(this).html(htmlString);
});

Here the event open callback function is not triggered.

Answer 4

Based on iMatoria's answer this is how I did it.

var jAuto = $('#purchaser-autocomplete input:text');

jAuto.autocomplete({
        source: URL
        minLength: 2,
        select: function (event, ui) {
            //Do Stuff
        }
    });

jAuto.data("autocomplete")._renderItem = function (ul, item) {
    var cssClass = "";
    if (item.id.substring(0,1) === 'S') { cssClass = " class='item-staff'"; }

    return $("<li" + cssClass + "></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
}

jAuto.focus();