jQuery UI – 自动完成 – 自定义样式？

我正在使用以下代码，它正在工作，获取值等，但 and
标签显示为文本而不是呈现。 我想将item.id和item.label放在不同的行上，如果可能的话， item.id粗体：

  $( "#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: '' + item.id + '
' + item.label, value: item.id } })); } }); }, minLength: 2 }); 

Answer 1

看起来你有一些额外的代码（ajax调用），它可能不需要自动完成。 但是，您可以换掉jquery放入的特殊字符来转义自动完成的“打开”事件中的html。

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

完整示例http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/ 。

而且，如果您在自动完成中使用perl，那么http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/就是一个例子。

Answer 2

而不是成功事件，使用_renderItem事件。

在Vroom实时实施。 输入机场，你会注意到左边的图像。

注意：下面的_renderItem有一些复杂的计算。 不要那样做，只是利用这个想法。

 $("#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 $("
") .data("item.autocomplete", item) .append("" + (item[0] + (item[2] == "" ? "" : ", " + item[2]) + (item[1] == "" ? "" : " (" + item[1] + ")")).replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term).replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1") + "") .appendTo(ul); }; 

Answer 3

我们通过在函数末尾添加以下代码解决了这个问题：

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

这里没有触发事件打开回调函数。

Answer 4

根据iMatoria的回答，我就是这样做的。

 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 $("") .data("item.autocomplete", item) .append("" + item.label + "") .appendTo(ul); } jAuto.focus();