jQuery UI - 自动完成 - 自定义样式？ [英] jQuery UI - Autocomplete - Custom style?

问题描述

我使用下面的代码，它的工作，获得值等等，但< b>和< br> 标签显示为文本，而不是呈现。我想要 item.id 和 item.label 在不同的行，如果可能的话 item.id bold：

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

推荐答案

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

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

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

Full example 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 / 就是一个例子。

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.

这篇关于jQuery UI - 自动完成 - 自定义样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！