JQuery UI - AutoFill - Custom Style?

Question

I use the following code, and it works, getting the values ​​back, etc., but the <b> and <br> tags are displayed as text, but not received. I would like item.id and item.label be on different lines, if possible 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 that you have an additional code (ajax call) for autocompletion, which may not be needed. But you can just swap the special characters that jquery sets to avoid html in the "open" autocomplete event.

 $("#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 use perl in autcomplete, http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/ is an example for this.

Answer 2

Instead of the Success event, use the _renderItem event.

Real implementation on Vroom . Enter the airport, you will see the image on the left.

NOTE. _renderItem below has some complicated calculations. Do not do this, just use this 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 open call function does not start.

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();